@bizdoc/core 1.14.13 → 1.14.14

package/fesm2015/bizdoc-core.mjs

@@ -132,8 +132,7 @@ 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, 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 { Diagram, UndoRedo, ConnectorBridging, ConnectorEditing, Snapping, SymbolPalette, BpmnDiagrams, PortVisibility, PortConstraints, DiagramConstraints, DiagramTools, SelectorConstraints, NodeConstraints, ConnectorConstraints, Connector, Node, ConnectionPointOrigin, SnapConstraints, ComplexHierarchicalTreeService, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService, ComplexHierarchicalTree, DataBinding, LineDistribution, ToolBase } 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';
@@ -1315,7 +1314,7 @@ const STRINGS = {
         Reassign: 'Reassign',
         ReassignAll: 'Reassign all',
         ShowAll: 'Show All',
-        OutOfOfficeOn: 'You are set as <i>out of office</i>. Your messages are diverted to <em>{0}</em>',
+        OutOfOfficeOn: 'You are set as <i>out of office</i>. Your messages are forwarded to <em>{0}</em>',
         Dismiss: 'Dismiss',
         ChangeOptions: 'Options',
         Impersonating: 'You logged in on behalf of {0}',
@@ -13376,7 +13375,7 @@ class WorkflowNodeComponent {
         this._fb = _fb;
         this._pane = _pane;
         this.change = new EventEmitter();
-        this.connectorInfo = this._fb.group({
+        this.connector = this._fb.group({
             action: '',
             case: ''
         });
@@ -13386,31 +13385,48 @@ class WorkflowNodeComponent {
     ngOnInit() {
         this._pane.dataChange.subscribe(d => {
             this.nodes = d['nodes'];
+            this.diagram = d['diagram'];
             this.connectors = d['connectors'];
             this.tool = null;
             this._elementDestroy.next();
+            this.argumentstemplate.clear();
             if (this.connectors.length) {
-                this.connectorInfo.valueChanges.pipe(takeUntil$1(this._elementDestroy)).subscribe(() => {
-                    this.connectors.forEach(c => {
-                        Object.assign(c.addInfo, this.connectorInfo.getRawValue());
-                        this.change.emit();
-                    });
-                });
                 const connector = this.connectors[0];
-                this.connectors.forEach(c => {
-                    if (!c.addInfo)
-                        c.addInfo = {};
-                });
-                const action = connector.addInfo.action, acase = connector.addInfo.case;
-                this.connectorInfo.patchValue({
-                    action: this.connectors.length === 1 || this.connectors.every(c => c.addInfo.action === action) ? action : null,
-                    case: this.connectors.length === 1 || this.connectors.every(c => c.addInfo.case === acase) ? acase : null
-                });
+                if (connector.addInfo) {
+                    const action = connector.addInfo['action'], acase = connector.addInfo['case'];
+                    this.connector.patchValue({
+                        action: this.connectors.length === 1 || this.connectors.every(c => c.addInfo && c.addInfo['action'] === action) ? action : null,
+                        case: this.connectors.length === 1 || this.connectors.every(c => c.addInfo && c.addInfo['case'] === acase) ? acase : null
+                    });
+                }
                 this._pane.title = this._translate.get(this.connectors.length === 1 ? 'Connector' : 'Connectors', this.connectors.length);
                 this._pane.icon = 'link';
+                this.connector.valueChanges.pipe(takeUntil$1(this._elementDestroy)).subscribe(v => {
+                    const content = v['case'] || v['action'];
+                    this.connectors.forEach(c => {
+                        if (!c.addInfo)
+                            c.addInfo = this.connector.getRawValue();
+                        else
+                            Object.assign(c.addInfo, this.connector.getRawValue());
+                        cleanup(c.addInfo);
+                        if (!c.annotations.length)
+                            c.annotations.push({
+                                style: {
+                                    color: this._session.theme.dark ? 'white' : 'black',
+                                    fill: 'transparent',
+                                    opacity: .8,
+                                },
+                                content
+                            });
+                        else
+                            c.annotations[0].content = content;
+                    });
+                    this.diagram.dataBind();
+                    this.change.emit();
+                });
+                this.argumentstemplate.createEmbeddedView(this.connectorargs);
             }
-            this.argumentstemplate.clear();
-            if (this.nodes.length) {
+            else {
                 const node = this.node = this.nodes[0], addInfo = node.addInfo;
                 if (addInfo && addInfo.nodeType) {
                     const nodeType = addInfo.nodeType;
@@ -13418,10 +13434,22 @@ class WorkflowNodeComponent {
                     this._pane.title = tool.title;
                     const annotationArg = tool.arguments.find(a => a.diagram);
                     function change(m) {
-                        if (annotationArg && m[annotationArg.name] !== null && m[annotationArg.name] !== undefined) {
-                            node.annotations[0].content = m[annotationArg.name];
+                        if (annotationArg && m[annotationArg.name] !== null) {
+                            if (node.annotations.length)
+                                node.annotations[0].content = m[annotationArg.name] || null;
+                            else
+                                node.annotations.push({
+                                    style: {
+                                        color: this._session.theme.dark ? 'white' : 'black',
+                                        fill: 'transparent',
+                                        opacity: .8,
+                                    },
+                                    content: m[annotationArg.name] || null
+                                });
                         }
-                        Object.assign(addInfo, cleanup(m));
+                        Object.assign(addInfo, m);
+                        cleanup(addInfo);
+                        this.diagram.dataBind();
                         this.change.emit();
                     }
                     if (tool.template) {
@@ -13454,8 +13482,8 @@ class WorkflowNodeComponent {
         instance.form.patchValue(node.addInfo, { emitEvent: false });
         return instance;
     }
-    connectorCaseChange(acase) {
-        this.connectorInfo.controls['case'].setValue(acase);
+    connectorCaseChange(evt) {
+        this.connector.controls['case'].setValue(evt.value);
         this.change.emit();
     }
     ngOnDestroy() {
@@ -13464,15 +13492,18 @@ class WorkflowNodeComponent {
     }
 }
 WorkflowNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WorkflowNodeComponent, deps: [{ token: SessionService }, { token: BizDocComponentFactoryResolver }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: TranslateService }, { token: i1$5.FormBuilder }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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$4.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$5.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$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$5.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$5.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.9", type: WorkflowNodeComponent, selector: "ng-component", outputs: { change: "change" }, viewQueries: [{ propertyName: "argumentstemplate", first: true, predicate: ["arguments"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "connectorargs", first: true, predicate: ["connectorargs"], descendants: true, static: true }], ngImport: i0, template: "<ng-container #arguments>\r\n</ng-container>\r\n<ng-template #connectorargs>\r\n  <form [formGroup]=\"connector\" 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]=\"connector.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange($event)\">\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 [style.display]=\"connector.controls['case'].value==='true'||connector.controls['case'].value==='false'?'none':''\">\r\n      <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{width:100%;padding:4px;display:block}\n"], components: [{ type: i1$4.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$5.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$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$5.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$5.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.9", 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\" 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"] }]
+            args: [{ template: "<ng-container #arguments>\r\n</ng-container>\r\n<ng-template #connectorargs>\r\n  <form [formGroup]=\"connector\" 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]=\"connector.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange($event)\">\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 [style.display]=\"connector.controls['case'].value==='true'||connector.controls['case'].value==='false'?'none':''\">\r\n      <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{width:100%;padding:4px;display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: BizDocComponentFactoryResolver }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: TranslateService }, { type: i1$5.FormBuilder }, { type: PaneRef }]; }, propDecorators: { change: [{
                 type: Output
             }], argumentstemplate: [{
                 type: ViewChild,
                 args: ['arguments', { static: true, read: ViewContainerRef }]
+            }], connectorargs: [{
+                type: ViewChild,
+                args: ['connectorargs', { static: true }]
             }] } });
 
 class FormService {
@@ -13518,10 +13549,10 @@ Diagram.Inject(UndoRedo, ConnectorBridging, ConnectorEditing, Snapping);
 SymbolPalette.Inject(BpmnDiagrams);
 function getPorts$1() {
     const ports = [
-        { 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 } }
+        { id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw },
+        { id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw },
+        { id: 'port3', shape: 'Circle', offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw },
+        { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw }
     ];
     return ports;
 }
@@ -13546,26 +13577,6 @@ function paletteIconClick() {
         }
     }
 }
-//Defines the tool
-class DrawTool extends ConnectorDrawingTool {
-    constructor(diagram, segments) {
-        super(diagram.commandHandler, 'ConnectorSourceEnd', null);
-        this.diagram = diagram;
-        this.segments = segments;
-    }
-    mouseMove(args) {
-        if (this.diagram.selectedItems.nodes.length) {
-            this.diagram.drawingObject = {
-                type: this.segments || 'Bezier',
-                sourceID: this.diagram.selectedItems.nodes[0].id
-            };
-            this.inAction = true;
-        }
-        const ok = super.mouseMove(args);
-        return ok;
-    }
-}
-const LINK_PATH = 'M346.7,714.6l368.1-368.1c17.9-17.9,17.9-47.1,0-64.9c-17.9-17.9-47.1-17.9-64.9,0l-368,368c-17.9,17.9-17.9,47.1,0,64.9C299.6,732.5,328.9,732.5,346.7,714.6z M468.2,651c6.4,9,7.6,18.5,7.6,23.8c0,6.3-1.5,18.6-11.8,28.9L271,896.5c-10.3,10.3-22.5,11.8-28.9,11.8c-6.3,0-18.6-1.5-28.9-11.8L103.5,786.8c-10.3-10.3-11.8-22.5-11.8-28.9c0-6.4,1.5-18.6,11.8-28.9l192.9-192.9c10.3-10.3,22.5-11.8,28.9-11.8c4.5,0,11.8,0.8,19.3,4.8l58.6-58.6c-48-39.6-119.6-36.9-164.5,7.9L45.7,671.3c-47.7,47.7-47.7,125.5,0,173.2l109.7,109.7c47.7,47.7,125.5,47.7,173.2,0l192.9-192.9c46-46,47.6-120.4,4.6-168.4L468.2,651z M954.2,155.5L844.5,45.8C796.9-1.9,719-1.9,671.3,45.8L478.4,238.7c-44.8,44.8-47.5,116.5-7.9,164.5l58.6-58.6c-4-7.6-4.8-14.9-4.8-19.3c0-6.3,1.5-18.6,11.8-28.9l192.9-192.9c10.3-10.3,22.5-11.8,28.9-11.8c6.3,0,18.6,1.5,28.9,11.8l109.7,109.7c10.3,10.3,11.8,22.5,11.8,28.9c0,6.3-1.5,18.6-11.8,28.9L703.7,464c-10.3,10.3-22.5,11.8-28.9,11.8c-5.3,0-14.8-1.1-23.8-7.6l-58,58c48,43,122.3,41.5,168.4-4.6l192.9-192.9C1001.9,281.1,1001.9,203.1,954.2,155.5z';
 /** workflow component*/
 class WorkflowComponent {
     /** workflow ctor */
@@ -13576,7 +13587,7 @@ class WorkflowComponent {
         this._router = _router;
         this._session = _session;
         this._translate = _translate;
-        this.tools = true;
+        this.fontSizes = [9, 11, 12, 13, 15, 21, 31, 41];
         this.connectorType = 'Bezier';
         this.alignment = 'Center';
         this.fontSize = 12;
@@ -13585,22 +13596,16 @@ class WorkflowComponent {
         this.palettes = [];
         this.diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging | DiagramConstraints.UserInteraction | DiagramConstraints.Zoom;
         this.diagramTool = DiagramTools.Default;
-        //Defines the user handle collection for nodes in diagram
-        this._userHandles = [
-            {
-                name: 'connect',
-                pathData: LINK_PATH,
-                visible: true,
-                offset: 0,
-                side: 'Right',
-                displacement: 20,
-                margin: { top: 0, bottom: 0, left: 0, right: 0 }
-            }
-        ];
         //SymbolPalette Properties
         this.symbolMargin = { left: 10, right: 10, top: 10, bottom: 10 };
-        this.snapSettings = {};
-        this.selectedItems = {};
+        this.snapSettings = {
+        //  horizontalGridlines: gridlines,
+        //  verticalGridlines: gridlines,
+        //  constraints: SnapConstraints.All & ~SnapConstraints.ShowLines
+        };
+        this.selectedItems = {
+            constraints: SelectorConstraints.All & ~SelectorConstraints.Rotate
+        };
         this.scrollSettings = {
             minZoom: .5,
             maxZoom: 2.5
@@ -13611,44 +13616,47 @@ class WorkflowComponent {
             verticalRuler: { markerColor: this._rulerColor }
         };
         this._destroy = new Subject();
-        this.nodeDefaults = () => {
-            const obj = {
-                style: {
+        this._nodedestroy = new Subject();
+        this.nodeDefaults = (obj) => {
+            if (obj.addInfo && obj.addInfo['nodeType']) {
+                obj.style = {
                     fill: 'transparent',
                     strokeColor: this._session.theme.dark ? 'white' : 'black',
                     strokeWidth: 1
                 },
-                annotations: [{
-                        style: {
-                            color: this._session.theme.dark ? 'white' : 'black',
-                            fill: 'transparent',
-                            opacity: .8
-                        }
-                    }]
-            };
-            if (obj.width === undefined) {
-                obj.width = 145;
-            }
-            else {
-                const ratio = 100 / obj.width;
-                obj.width = 100;
-                obj.height *= ratio;
+                    obj.constraints = NodeConstraints.Default | NodeConstraints.AspectRatio,
+                    obj.ports = getPorts$1();
+                if (obj.width === undefined) {
+                    obj.width = 145;
+                }
+                else {
+                    const ratio = 100 / obj.width;
+                    obj.width = 100;
+                    obj.height *= ratio;
+                }
             }
-            obj.constraints = NodeConstraints.Default | NodeConstraints.AspectRatio;
-            obj.ports = getPorts$1();
             return obj;
         };
         this.connDefaults = (obj) => {
-            obj.constraints = ConnectorConstraints.Default | ConnectorConstraints.Bridging | ConnectorConstraints.DragSegmentThumb;
+            obj.constraints = ConnectorConstraints.Default | ConnectorConstraints.Bridging |
+                ConnectorConstraints.Bridging;
             obj.style.strokeColor = this._session.theme.dark ? 'white' : 'black';
+            obj.type = this.connectorType;
+            //  if (!obj.annotations) obj.annotations = [{
+            //    style: {
+            //      color: this._session.theme.dark ? 'white' : 'black',
+            //      fill: 'transparent',
+            //      opacity: .8,
+            //    },
+            //  }];
         };
+        this._tools = localStorage.getItem('diagram_tools') === '1';
         this._palettes();
     }
-    getTool(action) {
-        let tool = null;
-        if (action === 'connect')
-            tool = new DrawTool(this.diagram, this.connectorType);
-        return tool;
+    get tools() { return this._tools; }
+    set tools(val) {
+        localStorage.setItem('diagram_tools', val ? '1' : '0');
+        this._tools = val;
     }
     ngAfterViewInit() {
     }
@@ -13656,11 +13664,15 @@ class WorkflowComponent {
         this.symbolPalette = new SymbolPalette({
             expandMode: 'Multiple',
             palettes: this.palettes,
-            width: "100%", height: "100%", symbolHeight: 80,
-            enableRtl: false, enableAnimation: false, symbolWidth: 80,
+            width: "100%",
+            height: "100%",
+            enableRtl: false,
+            enableAnimation: false,
+            symbolHeight: 80,
+            symbolWidth: 80,
             symbolMargin: this.symbolMargin,
             getSymbolInfo: this.getSymbolInfo.bind(this),
-            getNodeDefaults: this.getSymbolDefaults.bind(this)
+            getNodeDefaults: this.getSymbolDefaults.bind(this),
         });
         this.symbolPalette.appendTo(this.symbolPaletteEl.nativeElement);
         this.diagram = new Diagram({
@@ -13670,7 +13682,6 @@ class WorkflowComponent {
             constraints: this.diagramConstraints,
             tool: this.diagramTool,
             getNodeDefaults: this.nodeDefaults.bind(this),
-            getCustomTool: this.getTool.bind(this),
             scrollSettings: this.scrollSettings,
             selectedItems: this.selectedItems,
             rulerSettings: this.rulerSettings,
@@ -13697,7 +13708,6 @@ class WorkflowComponent {
             this.diagram.fitToPage();
             this.dirty = false;
         });
-        this._pane.resized.pipe(takeUntil(this._destroy)).subscribe(() => this.diagram.refresh());
     }
     _palettes() {
         this._session.profile.nodes.forEach(n => {
@@ -13717,8 +13727,110 @@ class WorkflowComponent {
             }
             palette.symbols.push(node);
         });
-        //this.palettes.push({ id: 'design', title: this._translation.get('Design'), symbols: [{ id: 'text', shape: { type: 'Text', textContent: 'T' }, addInfo: { title: this._translation.get('Text') } }] });
-        /*this.palettes.push(swimlane );*/
+        this.palettes.push({
+            id: 'design',
+            title: this._translate.get('Design'),
+            symbols: [{
+                    id: 'Link22',
+                    type: 'Straight',
+                    sourcePoint: { x: 0, y: 0 },
+                    targetPoint: { x: 60, y: 60 },
+                    targetDecorator: {
+                        shape: 'Arrow',
+                        style: { strokeColor: '#757575', fill: '#757575' },
+                    },
+                    style: {
+                        strokeWidth: 1,
+                        strokeDashArray: '4 4',
+                        strokeColor: '#757575',
+                    }
+                },
+                {
+                    id: 'text', shape: { type: 'Text', content: 'T' },
+                    constraints: NodeConstraints.Default & ~NodeConstraints.InConnect & ~NodeConstraints.OutConnect,
+                    addInfo: { title: this._translate.get('Text') }
+                }]
+        });
+        const color = MATERIAL_PALETTES['grey'][200]; // this._session.getPrimery(100);
+        this.palettes.push({
+            id: 'swimlaneShapes',
+            expanded: true,
+            title: this._translate.get('Swimlane Shapes'),
+            symbols: [
+                {
+                    id: 'swimlane',
+                    addInfo: {
+                        title: this._translate.get('Horizontal')
+                    },
+                    shape: {
+                        type: 'SwimLane',
+                        lanes: [
+                            {
+                                id: 'lane1',
+                                header: {
+                                    style: { fill: color }
+                                }
+                            }
+                        ],
+                        orientation: 'Horizontal',
+                        isLane: true
+                    },
+                    height: 60,
+                    width: 140,
+                    offsetX: 70,
+                    offsetY: 30,
+                }, {
+                    id: 'vswimlane',
+                    addInfo: {
+                        title: this._translate.get('Vertical')
+                    },
+                    shape: {
+                        type: 'SwimLane',
+                        lanes: [
+                            {
+                                id: 'lane1',
+                                header: {
+                                    style: { fill: color }
+                                }
+                            }
+                        ],
+                        orientation: 'Vertical', isLane: true
+                    },
+                    height: 140,
+                    width: 60,
+                    offsetX: 70,
+                    offsetY: 30,
+                }, {
+                    id: 'vphase',
+                    addInfo: {
+                        title: this._translate.get('Phase')
+                    },
+                    shape: {
+                        type: 'SwimLane',
+                        phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: color }, }],
+                        annotations: [{ text: '' }],
+                        orientation: 'Vertical', isPhase: true
+                    },
+                    height: 60,
+                    width: 140,
+                    style: { strokeColor: color }
+                }, {
+                    id: 'hphase',
+                    addInfo: {
+                        title: this._translate.get('Phase')
+                    },
+                    shape: {
+                        type: 'SwimLane',
+                        phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: color }, }],
+                        annotations: [{ text: '' }],
+                        orientation: 'Horizontal', isPhase: true
+                    },
+                    height: 60,
+                    width: 80,
+                    style: { strokeColor: color }
+                }
+            ]
+        });
     }
     _versionNode(version) {
         return {
@@ -13739,11 +13851,11 @@ class WorkflowComponent {
         };
     }
     getSymbolInfo(symbol) {
-        return {
+        return symbol.addInfo ? {
             fit: true,
             tooltip: symbol.addInfo.title,
             description: { text: symbol.addInfo.title, overflow: 'Wrap', wrap: 'WrapWithOverflow' }
-        };
+        } : null;
     }
     getSymbolDefaults(symbol) {
         symbol.width = symbol.height = 40;
@@ -13758,50 +13870,42 @@ class WorkflowComponent {
         this.diagram.tool = DiagramTools.Default;
     }
     selectionChange(evt) {
-        const { nodes, connectors } = this.diagram.selectedItems;
-        if (connectors.length || nodes.length) {
-            if (nodes.length === 1 && nodes[0].addInfo) {
-                this.diagram.selectedItems.constraints = SelectorConstraints.All | SelectorConstraints.UserHandle;
-                this.diagram.selectedItems.userHandles = this._userHandles;
-            }
+        const { newValue, state } = evt;
+        if (state !== 'Changed' || !newValue.length) {
+            this._nodedestroy.next();
+            return;
+        }
+        const connectors = newValue.filter(n => n instanceof Connector).map(n => n);
+        if (connectors.length) {
+            const connector = connectors[0], type = connector.type;
+            this.connectorType = connectors.length === 1 ||
+                connectors.every(c => c.type === type) ? type : null;
+            if (connector.annotations.length && connector.annotations[0].style)
+                this.fontSize = connector.annotations[0].style.fontSize;
+            this.connectorType = connectors.length === 1 ||
+                connectors.every(c => c.type === type) ? type : null;
+        }
+        const nodes = newValue.filter(n => n instanceof Node);
+        if (nodes.length) {
+            const node = nodes[0], addInfo = node.addInfo;
+            if (addInfo && addInfo.nodeType && node.annotations.length && node.annotations[0].style)
+                this.fontSize = node.annotations[0].style.fontSize;
             else
-                this.diagram.selectedItems.constraints = SelectorConstraints.All ^ SelectorConstraints.UserHandle;
-            if (connectors.length) {
-                const connector = connectors[0];
-                connectors.forEach(c => {
-                    if (!c.addInfo)
-                        c.addInfo = {};
-                });
-                const type = connector.type;
-                this.connectorType = connectors.length === 1 || connectors.every(c => c.type === type) ? type : null;
-                if (connector.annotations.length)
-                    this.fontSize = connector.annotations[0].style.fontSize;
-                this.connectorType = connectors.length === 1 || connectors.every(c => c.type === type) ? type : null;
-            }
-            if (nodes.length) {
-                const node = nodes[0], addInfo = node.addInfo;
-                if (addInfo && addInfo.nodeType) {
-                    if (node.annotations.length)
-                        this.fontSize = node.annotations[0].style.fontSize;
-                }
-            }
-            this._router.navigate(WorkflowNodeComponent, {
-                state: {
-                    nodes, connectors
-                },
-                policy: OpenPolicy.Tab,
-                expandable: false,
-                group: ''
-            }).then(p => {
-                p.instance.change.
-                    pipe(takeUntil(this._destroy)).subscribe(() => {
-                    this.dirty = true;
-                    this.diagram.dataBind();
-                });
-            });
+                return;
         }
-        else
-            this._router.collapse();
+        this._router.navigate(WorkflowNodeComponent, {
+            state: {
+                diagram: this.diagram,
+                nodes,
+                connectors
+            },
+            policy: OpenPolicy.Tab,
+            expandable: false,
+            group: ''
+        }).then(p => {
+            p.instance.change.
+                pipe(takeUntil(this._nodedestroy.pipe(tap$1(() => p.close())))).subscribe(() => this.dirty = true);
+        });
     }
     align(value) {
         function align(n) {
@@ -13815,19 +13919,43 @@ class WorkflowComponent {
             });
         }
         this.diagram.selectedItems.nodes.forEach(align);
-        this.diagram.selectedItems.connectors.forEach(align);
+        this.diagram.selectedItems.connectors.forEach(c => {
+            c.annotations.forEach(a => {
+                a.alignment = value === 'Left' ? 'Before' :
+                    value === 'Right' ? 'After' : 'Center';
+                a.offset = 5;
+                a.displacement = {
+                    x: value === 'Right' ? 1 : value === 'Left' ? 0 : .5,
+                    y: value === 'Top' ? 0 : value === 'Bottom' ? 1 : .5
+                };
+            });
+        });
         this.alignment = value;
         this.dirty = true;
     }
     dragEnter(args) {
-        const obj = args.element;
-        if (obj instanceof Node) {
-            const { width, height } = obj;
-            obj.width = 100;
-            obj.height *= 100 / width;
-            obj.offsetX += (obj.width - width) / 2;
-            obj.offsetY += (obj.height - height) / 2;
-            obj.style = { fill: 'white', strokeColor: 'black' };
+        if (args.element instanceof Node) {
+            const shape = args.element.shape;
+            if (shape.isLane) {
+                switch (shape.orientation) {
+                    case 'Horizontal':
+                        shape.lanes[0].height = 100;
+                        shape.lanes[0].width = 400;
+                        break;
+                    case 'Vertical':
+                        shape.lanes[0].height = 400;
+                        shape.lanes[0].width = 100;
+                        break;
+                }
+            }
+            else {
+                const { width, height } = args.element;
+                args.element.width = 100;
+                args.element.height *= 100 / width;
+                args.element.offsetX += (args.element.width - width) / 2;
+                args.element.offsetY += (args.element.height - height) / 2;
+                args.element.style = { fill: 'white', strokeColor: 'black' };
+            }
         }
     }
     propertyChange(e) {
@@ -13837,15 +13965,6 @@ class WorkflowComponent {
     change() {
         this.dirty = true;
     }
-    addText() {
-        this.diagram.drawingObject = {
-            shape: {
-                type: 'Text',
-            },
-            constraints: NodeConstraints.Default & ~NodeConstraints.InConnect & ~NodeConstraints.OutConnect
-        };
-        this.diagram.tool = DiagramTools.DrawOnce;
-    }
     /**
      * Ctrl-s save
      * @param event
@@ -13870,9 +13989,22 @@ class WorkflowComponent {
         this.connectorType = type;
         this.dirty = true;
     }
-    sizeChange(val) {
-        this.diagram.selectedItems.nodes.forEach(n => n.annotations.forEach(a => a.style.fontSize = parseInt(val)));
+    fontSizeChange(val) {
+        function change(node) {
+            var _a;
+            (_a = node.annotations) === null || _a === void 0 ? void 0 : _a.forEach(a => {
+                if (!a.style)
+                    a.style = { fontSize: val };
+                else
+                    a.style.fontSize = val;
+            });
+            if (node.shape.type === 'Text')
+                node.style.fontSize = val;
+        }
+        this.diagram.selectedItems.nodes.forEach(change);
+        this.diagram.selectedItems.connectors.forEach(change);
         this.diagram.dataBind();
+        this.dirty = true;
     }
     strokeChange(val) {
         this.diagram.selectedItems.connectors.forEach(c => {
@@ -13915,15 +14047,17 @@ class WorkflowComponent {
         (_b = this.diagram) === null || _b === void 0 ? void 0 : _b.destroy();
         this._destroy.next();
         this._destroy.complete();
+        this._nodedestroy.next();
+        this._nodedestroy.complete();
     }
 }
 WorkflowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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.9", 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.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.9", 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)=\"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=\"tools-divider\"></span>\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  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\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 overlayPanelClass=\"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    <!--<ng-container *ngIf=\"connectors.length\">\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n      </ng-container>\r\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    </ng-container>-->\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 overlayPanelClass=\"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  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item *ngFor=\"let size of fontSizes\" (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\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 .mat-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7.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: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.9", 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  <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"] }]
+                    }, 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)=\"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=\"tools-divider\"></span>\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  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\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 overlayPanelClass=\"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    <!--<ng-container *ngIf=\"connectors.length\">\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n      </ng-container>\r\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    </ng-container>-->\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 overlayPanelClass=\"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  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item *ngFor=\"let size of fontSizes\" (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\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 .mat-menu-panel{min-width:0!important}.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: ['symbolPaletteEl', { static: true }]
@@ -14134,11 +14268,11 @@ class FlowViewComponent extends TraceBase {
         this._duration = _duration;
         this._elementRef = _elementRef;
         this.connectorType = 'Orthogonal';
-        this.tool = DiagramTools$1.ZoomPan;
-        this.diagramConstraints = DiagramConstraints$1.Default |
-            DiagramConstraints$1.Pan |
-            DiagramConstraints$1.LineRouting |
-            DiagramConstraints$1.Zoom;
+        this.tool = DiagramTools.ZoomPan;
+        this.diagramConstraints = DiagramConstraints.Default |
+            DiagramConstraints.Pan |
+            DiagramConstraints.LineRouting |
+            DiagramConstraints.Zoom;
         this.layout = {
             type: 'ComplexHierarchicalTree',
             connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
@@ -14177,7 +14311,7 @@ class FlowViewComponent extends TraceBase {
         return __awaiter(this, void 0, void 0, function* () {
             const { connectors, nodes, indicators } = yield this._prepare();
             this.diagram && this.diagram.destroy();
-            this.diagram = new Diagram$1({
+            this.diagram = new Diagram({
                 width: '100%',
                 height: 380,
                 nodes,
@@ -14321,8 +14455,8 @@ class FlowViewComponent extends TraceBase {
                                 position: 'TopCenter'
                             },
                             constraints: content ?
-                                NodeConstraints$1.Default | NodeConstraints$1.Tooltip :
-                                NodeConstraints$1.Default,
+                                NodeConstraints.Default | NodeConstraints.Tooltip :
+                                NodeConstraints.Default,
                             addInfo: {
                                 tooltip,
                                 recipient,
@@ -14412,8 +14546,8 @@ class FlowViewComponent extends TraceBase {
                             position: 'TopCenter'
                         },
                         constraints: content ?
-                            NodeConstraints$1.Default | NodeConstraints$1.Tooltip :
-                            NodeConstraints$1.Default,
+                            NodeConstraints.Default | NodeConstraints.Tooltip :
+                            NodeConstraints.Default,
                         addInfo: {
                             tooltip,
                             node
@@ -21314,7 +21448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                     providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService]
                 }]
         }] });
-Diagram$1.Inject(ComplexHierarchicalTree, BpmnDiagrams$1, DataBinding, LineDistribution /*, LayoutAnimation, LineRouting, ConnectorBridging*/);
+Diagram.Inject(ComplexHierarchicalTree, BpmnDiagrams, DataBinding, LineDistribution /*, LayoutAnimation, LineRouting, ConnectorBridging*/);
 
 class SyncfusionGridModule {
 }
@@ -24815,7 +24949,7 @@ class ColorPicker {
 }
 ColorPicker.nextId = 0;
 ColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ColorPicker, deps: [{ token: i1$5.NgControl, optional: true, self: true }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i7$2.Directionality }], target: i0.ɵɵFactoryTarget.Component });
-ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ColorPicker, selector: " mat.get-color-from-palette-picker", inputs: { label: "label", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: MatButton, descendants: true, static: true }, { propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<button mat-button (click)='open()'>
+ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ColorPicker, selector: "bizdoc-color-picker", inputs: { label: "label", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: MatButton, descendants: true, static: true }, { propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<button mat-button (click)='open()'>
 <span>{{label}}</span>
       <mat-icon>arrow_drop_down</mat-icon>
     </button>
@@ -24828,7 +24962,7 @@ ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
 </ng-template>`, isInline: true, styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"], components: [{ type: i7.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: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
-            args: [{ selector: ' mat.get-color-from-palette-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], template: `<button mat-button (click)='open()'>
+            args: [{ selector: 'bizdoc-color-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], template: `<button mat-button (click)='open()'>
 <span>{{label}}</span>
       <mat-icon>arrow_drop_down</mat-icon>
     </button>
@@ -29091,11 +29225,11 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this.theme = this._session.theme.dark ? 'MaterialDark' : 'Material';
         this.accent = this._session.getAccent();
         this.form = this._fb.group({ search: null, formId: null });
-        this.diagramConstraints = DiagramConstraints$1.Default | DiagramConstraints$1.Bridging |
-            DiagramConstraints$1.LineRouting |
-            DiagramConstraints$1.Pan |
-            DiagramConstraints$1.Zoom;
-        this.diagramTool = DiagramTools$1.SingleSelect;
+        this.diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging |
+            DiagramConstraints.LineRouting |
+            DiagramConstraints.Pan |
+            DiagramConstraints.Zoom;
+        this.diagramTool = DiagramTools.SingleSelect;
         this.layout = {
             type: 'ComplexHierarchicalTree',
             connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
@@ -29114,7 +29248,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._accentColor = this._session.getAccent(800);
         this._primeryColor = this._session.getPrimery();
         this.selectedItems = {
-            constraints: SelectorConstraints$1.UserHandle,
+            constraints: SelectorConstraints.UserHandle,
             userHandles: [
                 {
                     name: 'info',
@@ -29141,13 +29275,13 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this.nodeDefaults = (node) => {
             const { indicator, virtual } = node.addInfo || {};
             if (indicator) {
-                node.constraints = NodeConstraints$1.PointerEvents | NodeConstraints$1.Tooltip,
+                node.constraints = NodeConstraints.PointerEvents | NodeConstraints.Tooltip,
                     node.style.strokeWidth = 0,
                     node.width = node.height = 15;
             }
             else if (node.id !== 'version') {
-                node.constraints = NodeConstraints$1.InConnect | NodeConstraints$1.OutConnect |
-                    NodeConstraints$1.PointerEvents | NodeConstraints$1.Select;
+                node.constraints = NodeConstraints.InConnect | NodeConstraints.OutConnect |
+                    NodeConstraints.PointerEvents | NodeConstraints.Select;
                 this._decorateNode(node);
                 node.ports = getPorts();
             }
@@ -29155,7 +29289,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         };
         this.connDefaults = (connector) => {
             const { virtual } = connector.addInfo || {};
-            connector.constraints = ConnectorConstraints$1.ReadOnly & ~ConnectorConstraints$1.Select;
+            connector.constraints = ConnectorConstraints.ReadOnly & ~ConnectorConstraints.Select;
             this._decorateConnector(connector);
         };
     }
@@ -29247,7 +29381,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
             this.mode = 'diagram';
             this.loading = null;
             this._cd.detectChanges();
-            this.diagram = new Diagram$1({
+            this.diagram = new Diagram({
                 width: '100%', height: '100%',
                 snapSettings: this.snapSettings,
                 layout: this.layout,
@@ -29402,7 +29536,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
                 fontSize: 50,
                 opacity: .1
             },
-            constraints: NodeConstraints$1.ReadOnly
+            constraints: NodeConstraints.ReadOnly
         };
         this.diagram.addLayer({
             id: 'version',
@@ -29468,12 +29602,12 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this.diagram.dataBind();
     }
     pan() {
-        this.diagram.constraints = this.diagram.constraints | DiagramConstraints$1.Pan;
-        this.diagram.tool = DiagramTools$1.ZoomPan;
+        this.diagram.constraints = this.diagram.constraints | DiagramConstraints.Pan;
+        this.diagram.tool = DiagramTools.ZoomPan;
     }
     cursor() {
-        this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints$1.Pan;
-        this.diagram.tool = DiagramTools$1.SingleSelect;
+        this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints.Pan;
+        this.diagram.tool = DiagramTools.SingleSelect;
     }
     _highlight(ids) {
         for (let i = 0; i < ids.length; i++) {
@@ -29759,6 +29893,7 @@ let PositionsComponent = class PositionsComponent {
         this._translate = _translate;
         this._popup = _popup;
         this._dialog = _dialog;
+        this.tools = true;
         this.dirty = false;
         this.saving = false;
         this.form = new FormGroup({});
@@ -30133,14 +30268,14 @@ let PositionsComponent = class PositionsComponent {
     }
 };
 PositionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PositionsComponent, deps: [{ token: SessionService }, { token: UtilityRef }, { token: DatasourceService }, { token: PromptService }, { token: AccountService }, { token: WindowTitleService }, { token: TranslateService }, { token: Popup }, { token: i3$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PositionsComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div fxLayout=\"row\" fxFlex>\r\n  <mat-nav-list class=\"timeline\">\r\n    <mat-list-item *ngFor=\"let t of types\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-nav-list>\r\n\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" fxFlex>\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7.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: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { 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"] }, { type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i2$3.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i12$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i1$4.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"] }], directives: [{ type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { 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: 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"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$2.MatCellDef, selector: "[matCellDef]" }, { type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i3$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.MatSelectTrigger, selector: "mat-select-trigger" }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe } });
+PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PositionsComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], 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\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div fxLayout=\"row\" fxFlex>\r\n  <mat-nav-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of types\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-nav-list>\r\n\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" fxFlex>\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7.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: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i2$3.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i12$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i1$4.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"] }], 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: 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: 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"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$2.MatCellDef, selector: "[matCellDef]" }, { type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i3$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.MatSelectTrigger, selector: "mat-select-trigger" }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe } });
 PositionsComponent = __decorate([
     BizDoc({ selector: 'bizdoc-positions' })
     /** positions component*/
 ], PositionsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PositionsComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div fxLayout=\"row\" fxFlex>\r\n  <mat-nav-list class=\"timeline\">\r\n    <mat-list-item *ngFor=\"let t of types\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-nav-list>\r\n\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" fxFlex>\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"] }]
+            args: [{ 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\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div fxLayout=\"row\" fxFlex>\r\n  <mat-nav-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of types\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-nav-list>\r\n\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" fxFlex>\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SessionService }, { type: UtilityRef, decorators: [{
                         type: Inject,