@bizdoc/core 1.14.6 → 1.14.10

package/fesm2020/bizdoc-core.mjs

@@ -131,8 +131,8 @@ import * as i9$5 from '@syncfusion/ej2-angular-spreadsheet';
 import { Spreadsheet, isNumber, SpreadsheetModule, SelectionService as SelectionService$2, BasicModuleService, ClipboardService, CellFormatService, KeyboardNavigationService, KeyboardShortcutService, NumberFormatService } from '@syncfusion/ej2-angular-spreadsheet';
 import * as i4 from '@ctrl/ngx-emoji-mart';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
-import { Diagram, BpmnDiagrams, UndoRedo, ConnectorBridging, ConnectorEditing, Snapping, DataBinding, SymbolPalette, ConnectorDrawingTool, DiagramConstraints, DiagramTools, NodeConstraints, ConnectorConstraints, SelectorConstraints, Node } from '@syncfusion/ej2-diagrams';
-import { Diagram as Diagram$1, ComplexHierarchicalTree, BpmnDiagrams as BpmnDiagrams$1, DataBinding as DataBinding$1, LineDistribution, DiagramTools as DiagramTools$1, DiagramConstraints as DiagramConstraints$1, ConnectionPointOrigin, SnapConstraints, NodeConstraints as NodeConstraints$1, ComplexHierarchicalTreeService, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService, ToolBase, SelectorConstraints as SelectorConstraints$1, ConnectorConstraints as ConnectorConstraints$1 } from '@syncfusion/ej2-angular-diagrams';
+import { Diagram, UndoRedo, ConnectorBridging, ConnectorEditing, Snapping, SymbolPalette, BpmnDiagrams, ConnectorDrawingTool, DiagramConstraints, DiagramTools, NodeConstraints, ConnectorConstraints, SelectorConstraints, Node } from '@syncfusion/ej2-diagrams';
+import { DiagramTools as DiagramTools$1, DiagramConstraints as DiagramConstraints$1, ConnectionPointOrigin, SnapConstraints, Diagram as Diagram$1, NodeConstraints as NodeConstraints$1, ComplexHierarchicalTreeService, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService, ComplexHierarchicalTree, BpmnDiagrams as BpmnDiagrams$1, DataBinding, LineDistribution, ToolBase, SelectorConstraints as SelectorConstraints$1, ConnectorConstraints as ConnectorConstraints$1 } from '@syncfusion/ej2-angular-diagrams';
 import * as i9$3 from '@syncfusion/ej2-angular-schedule';
 import { Schedule, Day, WorkWeek, Month, MonthAgenda, Agenda, Year, ScheduleModule, ExcelExportService as ExcelExportService$2, DayService, WorkWeekService, MonthService, MonthAgendaService, ICalendarExportService, AgendaService, YearService } from '@syncfusion/ej2-angular-schedule';
 import * as i10$1 from '@syncfusion/ej2-angular-kanban';
@@ -838,10 +838,10 @@ var OpenPolicy;
     OpenPolicy[OpenPolicy["Defer"] = 4] = "Defer";
     OpenPolicy[OpenPolicy["Pinnable"] = 8] = "Pinnable";
     OpenPolicy[OpenPolicy["Stretch"] = 16] = "Stretch";
-    OpenPolicy[OpenPolicy["Tab"] = 32] = "Tab";
-    OpenPolicy[OpenPolicy["Dialog"] = 96] = "Dialog";
-    OpenPolicy[OpenPolicy["Expandable"] = 128] = "Expandable";
-    OpenPolicy[OpenPolicy["Toggle"] = 256] = "Toggle";
+    OpenPolicy[OpenPolicy["Expandable"] = 32] = "Expandable";
+    OpenPolicy[OpenPolicy["Toggle"] = 64] = "Toggle";
+    OpenPolicy[OpenPolicy["Tab"] = 128] = "Tab";
+    OpenPolicy[OpenPolicy["Dialog"] = 384] = "Dialog";
     OpenPolicy[OpenPolicy["Dismissable"] = 512] = "Dismissable";
 })(OpenPolicy || (OpenPolicy = {}));
 const DEFAULT_POLICY = OpenPolicy.Pane;
@@ -1789,7 +1789,7 @@ var FieldType;
     FieldType["Time"] = "Time";
     FieldType["Date"] = "Date";
     FieldType["DateTime"] = "DateTime";
-    FieldType["Check"] = "Check";
+    FieldType["Checkbox"] = "Checkbox";
     FieldType["Currency"] = "Currency";
     FieldType["Select"] = "Select";
     FieldType["EmailAddress"] = "EmailAddress";
@@ -5596,7 +5596,7 @@ class LayoutComponent {
                 case FieldType.Html:
                     comp = HtmlField;
                     break;
-                case FieldType.Check:
+                case FieldType.Checkbox:
                     comp = CheckField;
                     break;
                 case FieldType.Switch:
@@ -5657,7 +5657,7 @@ class LayoutComponent {
         field.validations.forEach(v => {
             switch (v.type) {
                 case ValidationType.Required:
-                    if (field.type === FieldType.Check || field.type === FieldType.Switch)
+                    if (field.type === FieldType.Checkbox || field.type === FieldType.Switch)
                         validators.push(Validators.requiredTrue);
                     else
                         validators.push(Validators.required);
@@ -6246,6 +6246,7 @@ class QueryParamNavigation extends NavigationPaneBase {
         this.queryParams = queryParams;
     }
 }
+/** */
 class PaneRef {
     constructor(component, injector, _options) {
         this.component = component;
@@ -6311,8 +6312,8 @@ class PaneRef {
         return this.parent === pane; //||
         //  (this.path && pane.path && this.path.startsWith(pane.path));
     }
-    refresh() {
-        this._comm$.next('refresh');
+    recycle() {
+        this._comm$.next('recycle');
     }
     focus() {
         this._comm$.next('focus');
@@ -7068,6 +7069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
 
 class RouterImpl {
 }
+/** desktop */
 class PaneRouter extends RouterImpl {
     constructor(_router) {
         super();
@@ -7082,6 +7084,7 @@ PaneRouter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: PaneRouter, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: PanesRouter }]; } });
+/** mobile */
 class NgRouter extends RouterImpl {
     constructor(_router) {
         super();
@@ -8442,21 +8445,29 @@ class GuideComponent {
         this._overlay = _overlay;
         this._ngRouter = _ngRouter;
         this._overlayRef = _overlayRef;
-        this.index = 0;
+        this.index = -1;
         this.count = this._data.steps.length;
         this.working = true;
     }
     ngOnInit() {
-        this._move(0);
+        if (this._data.name) {
+            const lastindex = localStorage.getItem(this._data.name + '_guide_step');
+            if (lastindex) {
+                this.index = Number.parseInt(lastindex);
+            }
+        }
+        this._moveBy(1);
     }
     /**
      *
-     * @param i
+     * @param steps
      */
-    _move(i) {
-        const index = this.index + i;
-        if (index < 0 || index == this.count)
+    _moveBy(steps) {
+        const index = this.index + steps;
+        if ((index < 0) || (index > this.count - 1)) {
+            localStorage.removeItem(this._data.name + '_guide_step');
             return;
+        }
         this.working = true;
         const step = this._data.steps[index];
         const { selector, position, navigate, simulate } = step, promisses = [];
@@ -8467,8 +8478,11 @@ class GuideComponent {
         let positionStrategy;
         if (selector) {
             const element = document.querySelector(selector);
-            if (!element)
-                throw `Guide ${this._data.name} step ${this.index} selector '${selector}' not found.`;
+            if (!element) {
+                console.warn(`Guide ${this._data.name} selector '${selector}' not found. skipping.`);
+                //this._moveBy(steps);
+                return;
+            }
             let positions;
             switch (position) {
                 case 'Above':
@@ -8510,6 +8524,7 @@ class GuideComponent {
         else
             positionStrategy = this._overlay.position().global().centerVertically().centerHorizontally();
         const complete = () => {
+            this._data.name && localStorage.setItem(this._data.name + '_guide_step', this.index.toString());
             this.index = index;
             this.step = step;
             this.working = false;
@@ -8522,10 +8537,10 @@ class GuideComponent {
         if (!this.working)
             switch (evt.keyCode) {
                 case LEFT_ARROW:
-                    this._move(this._session.direction === 'ltr' ? -1 : 1);
+                    this._moveBy(this._session.direction === 'ltr' ? -1 : 1);
                     break;
                 case RIGHT_ARROW:
-                    this._move(this._session.direction === 'ltr' ? 1 : -1);
+                    this._moveBy(this._session.direction === 'ltr' ? 1 : -1);
                     break;
                 case ESCAPE:
                     this.close();
@@ -8534,17 +8549,17 @@ class GuideComponent {
             }
     }
     next() {
-        this._move(1);
+        this._moveBy(1);
     }
     prev() {
-        this._move(-1);
+        this._moveBy(-1);
     }
     close() {
         this._overlayRef.detach();
     }
 }
 GuideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: GuideComponent, deps: [{ token: TOUR_TOKEN }, { token: SessionService }, { token: i1$4.Overlay }, { token: i1$6.Router }, { token: i1$4.OverlayRef }], target: i0.ɵɵFactoryTarget.Component });
-GuideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: GuideComponent, selector: "ng-component", host: { listeners: { "window:keydown": "keydown($event)" } }, ngImport: i0, template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index === 0 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index === count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index === count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n", components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "sanitizeHtml": SanitizeHtmlPipe, "translate": TranslatePipe }, animations: [trigger('body', [
+GuideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: GuideComponent, selector: "ng-component", host: { listeners: { "window:keydown": "keydown($event)" } }, ngImport: i0, template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index < 1 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index >= count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index >= count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n", components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "sanitizeHtml": SanitizeHtmlPipe, "translate": TranslatePipe }, animations: [trigger('body', [
             state('here', style({ width: '*', height: '*' })),
             transition('*<=>*', animate('250ms', style({})))
         ])] });
@@ -8553,7 +8568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             args: [{ animations: [trigger('body', [
                             state('here', style({ width: '*', height: '*' })),
                             transition('*<=>*', animate('250ms', style({})))
-                        ])], template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index === 0 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index === count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index === count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n" }]
+                        ])], template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index < 1 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index >= count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index >= count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [TOUR_TOKEN]
@@ -9293,7 +9308,7 @@ class ComposePaneComponent {
         this.form.save().subscribe();
     }
     saved() {
-        this._pane.refresh();
+        this._pane.recycle();
     }
     navComments() {
         this._navigate('comments').then(paneRef => {
@@ -9545,7 +9560,8 @@ class CubeAccumulationChartComponent {
             }
         };
         this.legendSettings = {
-            visible: false,
+            visible: true,
+            //position: this._session.inverse ? 'Left' : 'Right',
             isInversed: this._session.inverse,
             textStyle: {
                 fontFamily: FONT_FAMILY
@@ -13322,10 +13338,10 @@ class WorkflowNodeComponent {
     }
 }
 WorkflowNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WorkflowNodeComponent, deps: [{ token: SessionService }, { token: BizDocComponentFactoryResolver }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: TranslateService }, { token: i1$2.FormBuilder }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: WorkflowNodeComponent, selector: "ng-component", outputs: { change: "change" }, viewQueries: [{ propertyName: "argumentstemplate", first: true, predicate: ["arguments"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #arguments>\r\n</ng-container>\r\n<form *ngIf=\"connectors?.length\" [formGroup]=\"connectorInfo\" fxLayout=\"column\">\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n      <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n      <mat-option>{{'None' | translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-button-toggle-group [value]=\"connectorInfo.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange(acase.value)\">\r\n    <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <mat-form-field *ngIf=\"!connectorInfo.controls['case'].value\">\r\n    <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n  </mat-form-field>\r\n</form>\r\n<!--<mat-expansion-panel fxLayout=\"column\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Design' | translate\" style=\"background: none\">\r\n  <mat-expansion-panel-header>\r\n    <mat-panel-title>{{'Design'|translate}}</mat-panel-title>\r\n  </mat-expansion-panel-header>\r\n  <ng-container *ngIf=\"connectors.length\">\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"nodes.length\">\r\n    <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n      <mat-form-field>\r\n        <input matInput type=\"number\" [placeholder]=\"'FontSize'|translate\" (change)=\"sizeChange($event.target.value)\" [value]=\"fontSize\" />\r\n      </mat-form-field>\r\n      < mat.get-color-from-palette-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ mat.get-color-from-palette-picker>\r\n    </ng-container>\r\n    < mat.get-color-from-palette-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ mat.get-color-from-palette-picker>\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n</mat-expansion-panel>-->\r\n", styles: [":host{padding:8px;display:block}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "translate": TranslatePipe } });
+WorkflowNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: WorkflowNodeComponent, selector: "ng-component", outputs: { change: "change" }, viewQueries: [{ propertyName: "argumentstemplate", first: true, predicate: ["arguments"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #arguments>\r\n</ng-container>\r\n<form *ngIf=\"connectors?.length\" [formGroup]=\"connectorInfo\" fxLayout=\"column\" autocomplete=\"off\">\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n      <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n      <mat-option>{{'None' | translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-button-toggle-group [value]=\"connectorInfo.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange(acase.value)\">\r\n    <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <mat-form-field>\r\n    <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n  </mat-form-field>\r\n</form>\r\n<!--<mat-expansion-panel fxLayout=\"column\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Design' | translate\" style=\"background: none\">\r\n  <mat-expansion-panel-header>\r\n    <mat-panel-title>{{'Design'|translate}}</mat-panel-title>\r\n  </mat-expansion-panel-header>\r\n  <ng-container *ngIf=\"connectors.length\">\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"nodes.length\">\r\n    <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n      <mat-form-field>\r\n        <input matInput type=\"number\" [placeholder]=\"'FontSize'|translate\" (change)=\"sizeChange($event.target.value)\" [value]=\"fontSize\" />\r\n      </mat-form-field>\r\n      < mat.get-color-from-palette-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ mat.get-color-from-palette-picker>\r\n    </ng-container>\r\n    < mat.get-color-from-palette-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ mat.get-color-from-palette-picker>\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n</mat-expansion-panel>-->\r\n", styles: [":host{padding:8px;display:block}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WorkflowNodeComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container #arguments>\r\n</ng-container>\r\n<form *ngIf=\"connectors?.length\" [formGroup]=\"connectorInfo\" fxLayout=\"column\">\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n      <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n      <mat-option>{{'None' | translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-button-toggle-group [value]=\"connectorInfo.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange(acase.value)\">\r\n    <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <mat-form-field *ngIf=\"!connectorInfo.controls['case'].value\">\r\n    <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n  </mat-form-field>\r\n</form>\r\n<!--<mat-expansion-panel fxLayout=\"column\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Design' | translate\" style=\"background: none\">\r\n  <mat-expansion-panel-header>\r\n    <mat-panel-title>{{'Design'|translate}}</mat-panel-title>\r\n  </mat-expansion-panel-header>\r\n  <ng-container *ngIf=\"connectors.length\">\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"nodes.length\">\r\n    <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n      <mat-form-field>\r\n        <input matInput type=\"number\" [placeholder]=\"'FontSize'|translate\" (change)=\"sizeChange($event.target.value)\" [value]=\"fontSize\" />\r\n      </mat-form-field>\r\n      < mat.get-color-from-palette-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ mat.get-color-from-palette-picker>\r\n    </ng-container>\r\n    < mat.get-color-from-palette-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ mat.get-color-from-palette-picker>\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n</mat-expansion-panel>-->\r\n", styles: [":host{padding:8px;display:block}\n"] }]
+            args: [{ template: "<ng-container #arguments>\r\n</ng-container>\r\n<form *ngIf=\"connectors?.length\" [formGroup]=\"connectorInfo\" fxLayout=\"column\" autocomplete=\"off\">\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n      <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n      <mat-option>{{'None' | translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-button-toggle-group [value]=\"connectorInfo.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange(acase.value)\">\r\n    <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n    <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <mat-form-field>\r\n    <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n  </mat-form-field>\r\n</form>\r\n<!--<mat-expansion-panel fxLayout=\"column\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Design' | translate\" style=\"background: none\">\r\n  <mat-expansion-panel-header>\r\n    <mat-panel-title>{{'Design'|translate}}</mat-panel-title>\r\n  </mat-expansion-panel-header>\r\n  <ng-container *ngIf=\"connectors.length\">\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"nodes.length\">\r\n    <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n      <mat-form-field>\r\n        <input matInput type=\"number\" [placeholder]=\"'FontSize'|translate\" (change)=\"sizeChange($event.target.value)\" [value]=\"fontSize\" />\r\n      </mat-form-field>\r\n      < mat.get-color-from-palette-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ mat.get-color-from-palette-picker>\r\n    </ng-container>\r\n    < mat.get-color-from-palette-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ mat.get-color-from-palette-picker>\r\n    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ mat.get-color-from-palette-picker>\r\n  </ng-container>\r\n</mat-expansion-panel>-->\r\n", styles: [":host{padding:8px;display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: BizDocComponentFactoryResolver }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: TranslateService }, { type: i1$2.FormBuilder }, { type: PaneRef }]; }, propDecorators: { change: [{
                 type: Output
             }], argumentstemplate: [{
@@ -13372,7 +13388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
-Diagram.Inject(BpmnDiagrams, UndoRedo, ConnectorBridging, ConnectorEditing, Snapping, DataBinding);
+Diagram.Inject(UndoRedo, ConnectorBridging, ConnectorEditing, Snapping);
 SymbolPalette.Inject(BpmnDiagrams);
 function getPorts$1() {
     const ports = [
@@ -13508,9 +13524,9 @@ class WorkflowComponent {
             tool = new DrawTool(this.diagram, this.connectorType);
         return tool;
     }
-    ngOnInit() {
-    }
     ngAfterViewInit() {
+    }
+    ngOnInit() {
         this.symbolPalette = new SymbolPalette({
             expandMode: 'Multiple',
             palettes: this.palettes,
@@ -13538,9 +13554,6 @@ class WorkflowComponent {
             propertyChange: this.propertyChange.bind(this),
             selectionChange: this.selectionChange.bind(this),
         }, this.diagramEl.nativeElement);
-        this.diagramCreate();
-    }
-    diagramCreate() {
         paletteIconClick();
         this._pane.paramsChange.pipe(takeUntil(this._destroy)).subscribe(p => {
             const id = p['id'];
@@ -13611,16 +13624,14 @@ class WorkflowComponent {
         symbol.constraints = NodeConstraints.Default | NodeConstraints.AspectRatio;
     }
     pan() {
-        this.diagramConstraints = this.diagramConstraints | DiagramConstraints.Pan;
-        this.diagramTool = DiagramTools.ZoomPan;
+        this.diagram.constraints = this.diagram.constraints | DiagramConstraints.Pan;
+        this.diagram.tool = DiagramTools.ZoomPan;
     }
     cursor() {
-        this.diagramConstraints = this.diagramConstraints & ~DiagramConstraints.Pan;
-        this.diagramTool = DiagramTools.Default;
+        this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints.Pan;
+        this.diagram.tool = DiagramTools.Default;
     }
     selectionChange(evt) {
-        if (evt.state !== 'Changed')
-            return;
         const { nodes, connectors } = this.diagram.selectedItems;
         if (connectors.length || nodes.length) {
             if (nodes.length === 1 && nodes[0].addInfo) {
@@ -13646,7 +13657,6 @@ class WorkflowComponent {
                         this.fontSize = node.annotations[0].style.fontSize;
                 }
             }
-            this._router.collapse();
             this._router.navigate(WorkflowNodeComponent, {
                 state: {
                     nodes, connectors
@@ -13706,7 +13716,7 @@ class WorkflowComponent {
             },
             constraints: NodeConstraints.Default & ~NodeConstraints.InConnect & ~NodeConstraints.OutConnect
         };
-        this.diagramTool = DiagramTools.DrawOnce;
+        this.diagram.tool = DiagramTools.DrawOnce;
     }
     /**
      * Ctrl-s save
@@ -13779,18 +13789,18 @@ class WorkflowComponent {
     }
 }
 WorkflowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WorkflowComponent, deps: [{ token: PromptService }, { token: FormService }, { token: PaneRef }, { token: PanesRouter }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPalette"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagram"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  &nbsp;\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPalette>\r\n    </div>\r\n  </div>\r\n  <div #diagram id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings: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}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i25.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i23.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": TranslatePipe } });
+WorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPaletteEl"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagramEl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings: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}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i25.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i23.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WorkflowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-workflow', host: {
                         class: 'pane'
-                    }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  &nbsp;\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPalette>\r\n    </div>\r\n  </div>\r\n  <div #diagram id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings: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}\n"] }]
+                    }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings: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}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: FormService }, { type: PaneRef }, { type: PanesRouter }, { type: SessionService }, { type: TranslateService }]; }, propDecorators: { symbolPaletteEl: [{
                 type: ViewChild,
-                args: ['symbolPalette', { static: true }]
+                args: ['symbolPaletteEl', { static: true }]
             }], diagramEl: [{
                 type: ViewChild,
-                args: ['diagram', { static: true }]
+                args: ['diagramEl', { static: true }]
             }], handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -13981,7 +13991,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             args: [{ name: 'amDurationFormat' }]
         }], ctorParameters: function () { return [{ type: TranslateService }]; } });
 
-Diagram$1.Inject(ComplexHierarchicalTree, BpmnDiagrams$1, DataBinding$1, LineDistribution /*, LayoutAnimation, LineRouting, ConnectorBridging*/);
 const 
 //ELLIPSIS = 'M 650, 150 a 75,150 0 1,0 1,0 z',
 FYI_PATH = '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', ESCALATED_PATH = 'M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z', WARNNING_PATH$1 = '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';
@@ -19379,7 +19388,7 @@ class SlotsComponent {
                 else
                     this.expandPane();
                 break;
-            case 'refresh': {
+            case 'recycle': {
                 const state = this._constructHistoryState();
                 history.replaceState(state, '');
                 break;
@@ -20109,11 +20118,12 @@ const EXCEL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
 class BrokenPage {
 }
 BrokenPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: BrokenPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BrokenPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: BrokenPage, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+BrokenPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: BrokenPage, selector: "ng-component", host: { classAttribute: "mat-app-background" }, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: BrokenPage, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: '',
+                    host: { class: 'mat-app-background' }
                 }]
         }] });
 class BizDocApp {
@@ -20642,7 +20652,7 @@ class ReportComponent {
                         case FieldType.Date:
                             args[k] = new Date(val);
                             break;
-                        case FieldType.Check:
+                        case FieldType.Checkbox:
                             args[k] = val === 'true';
                             break;
                         default:
@@ -21101,7 +21111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                     ],
                     providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService]
                 }]
-        }] });
+        }] });
+Diagram$1.Inject(ComplexHierarchicalTree, BpmnDiagrams$1, DataBinding, LineDistribution /*, LayoutAnimation, LineRouting, ConnectorBridging*/);
 
 class SyncfusionGridModule {
 }
@@ -27373,6 +27384,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 args: ['nameInput', { static: true, read: ElementRef }]
             }] } });
 
+/**  */
+class HelpTipComponent {
+    constructor(_guide) {
+        this._guide = _guide;
+    }
+    ngOnInit() {
+        this.showTip = localStorage.getItem(this.name + '-tip') !== '1';
+        const guide = this._guide.guides.find(g => g.name === this.name);
+        this._message = guide.title.toLowerCase();
+    }
+    open(evt) {
+        this._guide.start(this.name);
+    }
+    dismiss() {
+        localStorage.setItem(this.name + 'tip', '1');
+        this.showTip = false;
+    }
+}
+HelpTipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: HelpTipComponent, deps: [{ token: GuideService }], target: i0.ɵɵFactoryTarget.Component });
+HelpTipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: HelpTipComponent, selector: "bizdoc-help-tip", inputs: { name: "name" }, ngImport: i0, template: `
+  <p fxLayout="row" class="form-help-tip" *ngIf="showTip">
+    <mat-icon>help_outline</mat-icon> &nbsp;<span (click)="open($event)" [innerHTML]="'HelpTip'|translate: _message" class="mat-body-1"></span>
+    <button mat-icon-button (click)="dismiss()" [bizdocTooltip]="'Dismiss'|translate"><mat-icon inline>close</mat-icon></button>
+  </p>
+`, isInline: true, styles: [".form-help-tip{align-items:center;border:1px rgb(0 0 0 / 38%) solid;margin:10px;border-radius:3px;padding:0 8px}\n"], components: [{ type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }], pipes: { "translate": TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: HelpTipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+  <p fxLayout="row" class="form-help-tip" *ngIf="showTip">
+    <mat-icon>help_outline</mat-icon> &nbsp;<span (click)="open($event)" [innerHTML]="'HelpTip'|translate: _message" class="mat-body-1"></span>
+    <button mat-icon-button (click)="dismiss()" [bizdocTooltip]="'Dismiss'|translate"><mat-icon inline>close</mat-icon></button>
+  </p>
+`,
+                    styles: [`
+.form-help-tip {
+  align-items: center;
+border: 1px rgb(0 0 0 / 38%) solid;
+  margin: 10px;
+  border-radius: 3px 3px;
+  padding: 0 8px;
+}
+`],
+                    selector: 'bizdoc-help-tip'
+                }]
+        }], ctorParameters: function () { return [{ type: GuideService }]; }, propDecorators: { name: [{
+                type: Input
+            }] } });
+
 /** configuration componenets */
 const CORE_COMPONENTS = [CubeCompareWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
@@ -27409,7 +27469,7 @@ class SharedModule {
     }
 }
 SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, declarations: [CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, declarations: [HelpTipComponent, CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
         CheckboxComponent, CubeParallelComponent, CubeSumComponent, CubeParallelViewComponent, CubeChartViewComponent, CubeExploreViewComponent, CubeDocumentSumComponent, ExploreItemImplComponent, DocumentInfoComponent, DocumentViewsComponent, ViewItemComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker, HtmlSimplePipe, QuickCommentComponent,
         DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
         MatIconAnimate, DateRangePipe, AgoPipe, ColorPicker, StateDirective, BrokenPage,
@@ -27551,7 +27611,7 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
+                    declarations: [HelpTipComponent, CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
                         CheckboxComponent, CubeParallelComponent, CubeSumComponent, CubeParallelViewComponent, CubeChartViewComponent, CubeExploreViewComponent, CubeDocumentSumComponent, ExploreItemImplComponent, DocumentInfoComponent, DocumentViewsComponent, ViewItemComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker, HtmlSimplePipe, QuickCommentComponent,
                         DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
                         MatIconAnimate, DateRangePipe, AgoPipe, ColorPicker, StateDirective, BrokenPage,