@bizdoc/core 3.2.6 → 3.2.7

package/fesm2022/bizdoc-core.mjs

@@ -127,7 +127,7 @@ import EventEmitter$1 from 'events';
 import * as i4$3 from '@ctrl/ngx-emoji-mart';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { Diagram, UndoRedo, ConnectorBridging, ConnectorEditing, Snapping, SymbolPalette, BpmnDiagrams, PortVisibility, PortConstraints, DiagramConstraints, SelectorConstraints, NodeConstraints, ConnectorConstraints, DiagramTools, Connector, Node, ToolBase, ConnectionPointOrigin as ConnectionPointOrigin$1 } from '@syncfusion/ej2-diagrams';
-import { DiagramAction, DiagramTools as DiagramTools$1, DiagramConstraints as DiagramConstraints$1, ConnectionPointOrigin, SnapConstraints, Diagram as Diagram$1, NodeConstraints as NodeConstraints$1, ComplexHierarchicalTreeService, ComplexHierarchicalTree, BpmnDiagrams as BpmnDiagrams$1, DataBinding, LineDistribution, LineRouting, ConnectorBridging as ConnectorBridging$1, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService } from '@syncfusion/ej2-angular-diagrams';
+import { DiagramAction, 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, LineRouting, ConnectorBridging as ConnectorBridging$1, LayoutAnimation } from '@syncfusion/ej2-angular-diagrams';
 import * as i5$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$3 from '@syncfusion/ej2-angular-kanban';
@@ -163,10 +163,10 @@ var OpenPolicy;
     OpenPolicy[OpenPolicy["Pinnable"] = 8] = "Pinnable";
     OpenPolicy[OpenPolicy["Stretch"] = 16] = "Stretch";
     OpenPolicy[OpenPolicy["Expandable"] = 32] = "Expandable";
-    OpenPolicy[OpenPolicy["Toggle"] = 64] = "Toggle";
-    OpenPolicy[OpenPolicy["Tab"] = 128] = "Tab";
-    OpenPolicy[OpenPolicy["Dismissable"] = 256] = "Dismissable";
-    OpenPolicy[OpenPolicy["Dialog"] = 672] = "Dialog";
+    OpenPolicy[OpenPolicy["Dismissable"] = 64] = "Dismissable";
+    OpenPolicy[OpenPolicy["Toggle"] = 128] = "Toggle";
+    OpenPolicy[OpenPolicy["Tab"] = 320] = "Tab";
+    OpenPolicy[OpenPolicy["Dialog"] = 832] = "Dialog";
 })(OpenPolicy || (OpenPolicy = {}));
 const DEFAULT_POLICY = OpenPolicy.Pane;
 
@@ -1613,7 +1613,7 @@ const STRINGS = {
         Preferences: 'Settings',
         Tags: 'Tags',
         Mention: 'Mention',
-        TagsHint: 'Choose or type tags',
+        TagsHint: 'Choose or type personal tags',
         ContinueEditing: 'Continue editing',
         Close: 'Close',
         View: 'View',
@@ -1967,6 +1967,10 @@ const STRINGS = {
         MaxLengthErr: 'Maximum <strong>{0}</strong> length',
     },
     'he': {
+        SettingThingsUp: 'אוסף נתונים',
+        PleaseWait: 'אנא המתן/י',
+        Enable: 'אפשר/י',
+        Disable: 'הסתר/י',
         Insights: 'תובנות',
         CheckOut: 'הורד/י',
         CheckIn: 'העלה/י',
@@ -2517,6 +2521,7 @@ const STRINGS = {
         Copyright: '&copy; מודינג',
         Map: 'מפה',
         Watched: 'נצפה {0}',
+        LicencedTo: 'רשיון ל-<strong>{0}</strong>',
         NothingHere: 'אין נתונים נוספים'
     }
 };
@@ -4075,7 +4080,7 @@ class LocalizedStringComponent {
         const currentLang = this._session.language;
         for (let lang of this._session.languages) {
             let val = this.multilingual ? this._value[lang] :
-                lang === currentLang ? this._value : null, ctrl = this._fb.control(val, this.required ? Validators.required : null);
+                lang === currentLang ? this._value : null, ctrl = this._fb.control(val, this.required && lang === currentLang ? Validators.required : null);
             this.group.addControl(lang, ctrl);
             if (lang === currentLang)
                 this.control = ctrl;
@@ -9531,11 +9536,11 @@ class TagsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TagsComponent, deps: [{ token: POPUP_DATA }, { token: MailboxService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: TagsComponent, selector: "ng-component", viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (item of tags; track item) {\r\n      <mat-chip\r\n        [removable]=\"true\" (removed)=\"remove(item)\">\r\n        {{item}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n      @for (item of options | async; track item) {\r\n        <mat-option [value]=\"item\">\r\n          {{item}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: TagsComponent, selector: "ng-component", viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (item of tags; track item) {\r\n      <mat-chip\r\n        [removable]=\"true\" (removed)=\"remove(item)\">\r\n        {{item}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n      @for (item of options | async; track item) {\r\n        <mat-option [value]=\"item\">\r\n          {{item}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{min-width:260px;padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (item of tags; track item) {\r\n      <mat-chip\r\n        [removable]=\"true\" (removed)=\"remove(item)\">\r\n        {{item}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n      @for (item of options | async; track item) {\r\n        <mat-option [value]=\"item\">\r\n          {{item}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{padding:8px}\n"] }]
+            args: [{ template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (item of tags; track item) {\r\n      <mat-chip\r\n        [removable]=\"true\" (removed)=\"remove(item)\">\r\n        {{item}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n      @for (item of options | async; track item) {\r\n        <mat-option [value]=\"item\">\r\n          {{item}}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{min-width:260px;padding:8px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POPUP_DATA]
@@ -15139,9 +15144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             args: [{ name: 'amDurationFormat' }]
         }], ctorParameters: () => [{ type: TranslateService }] });
 
-const 
-//ELLIPSIS = 'M 650, 150 a 75,150 0 1,0 1,0 z',
-FYI_PATH = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z', ESCALATED_PATH = 'M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z', WARNNING_PATH$1 = 'M 13.763735,1.8433735 H 6.3037349 l -5.27,5.27 v 7.4599995 l 5.27,5.27 h 7.4600001 l 5.27,-5.27 V 7.1133735 Z m -3.73,14.2999995 c -0.7200001,0 -1.3000001,-0.58 -1.3000001,-1.3 0,-0.72 0.58,-1.3 1.3000001,-1.3 0.72,0 1.3,0.58 1.3,1.3 0,0.72 -0.58,1.3 -1.3,1.3 z m 1,-4.3 H 9.0337349 V 5.8433735 h 2.0000001 z';
+const FYI_PATH = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z', ESCALATED_PATH = 'M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z', WARNNING_PATH$1 = 'M 13.763735,1.8433735 H 6.3037349 l -5.27,5.27 v 7.4599995 l 5.27,5.27 h 7.4600001 l 5.27,-5.27 V 7.1133735 Z m -3.73,14.2999995 c -0.7200001,0 -1.3000001,-0.58 -1.3000001,-1.3 0,-0.72 0.58,-1.3 1.3000001,-1.3 0.72,0 1.3,0.58 1.3,1.3 0,0.72 -0.58,1.3 -1.3,1.3 z m 1,-4.3 H 9.0337349 V 5.8433735 h 2.0000001 z';
 /** flow-view component*/
 class FlowViewComponent extends TraceBase {
     /** workflow-view ctor */
@@ -15153,8 +15156,7 @@ class FlowViewComponent extends TraceBase {
         this._elementRef = _elementRef;
         this.connectorType = 'Orthogonal';
         this.tool = DiagramTools$1.ZoomPan;
-        this.diagramConstraints = DiagramConstraints$1.Default |
-            DiagramConstraints$1.Pan |
+        this.diagramConstraints = DiagramConstraints$1.Pan |
             DiagramConstraints$1.LineRouting |
             DiagramConstraints$1.Bridging |
             DiagramConstraints$1.Zoom;
@@ -15167,7 +15169,7 @@ class FlowViewComponent extends TraceBase {
             enableRouting: true,
             verticalSpacing: 50,
             margin: { top: 4 },
-            //arrangement: {},
+            //arrangement: ChildArrangement.Nonlinear,
             //enableAnimation: true,
             //root: 'start',
             orientation: this.enableRtl ? 'RightToLeft' : 'LeftToRight',
@@ -15208,10 +15210,9 @@ class FlowViewComponent extends TraceBase {
             scrollSettings: this.scrollSettings,
             snapSettings: this.snapSettings,
             constraints: this.diagramConstraints,
-            getConnectorDefaults: this.connDefaults.bind(this),
-            getNodeDefaults: this.nodeDefaults.bind(this),
         }, this._elementRef.nativeElement);
         this.diagram.doLayout();
+        this.diagram.fitToPage({ margin: { top: 10 } });
         indicators.forEach((n, i) => {
             const parent = this.diagram.getNodeObject(n.addInfo.parentId);
             n.offsetX = parent.offsetX + (this.enableRtl ? -25 : 25);
@@ -15219,7 +15220,6 @@ class FlowViewComponent extends TraceBase {
             n.zIndex = 1000 + i;
             this.diagram.add(n);
         });
-        this.diagram.fitToPage({ margin: { top: 10 } });
         interval(60000).pipe(takeUntil(this._destroy)).subscribe(this._refresh.bind(this));
     }
     _refresh() {
@@ -15242,63 +15242,12 @@ class FlowViewComponent extends TraceBase {
                 n.addInfo.tooltip.estimatedTime = this._timeEstimate(node),
                     n.tooltip.content = this._tooltip(n.addInfo.tooltip);
         });
-        // this.diagram.dataBind();
-    }
-    /**
-     *
-     * @param obj
-     */
-    nodeDefaults(obj) {
-        const { recipient, node, indicator } = obj.addInfo;
-        if (indicator) {
-            obj.width = obj.height = 15;
-            obj.style.strokeWidth = 0;
-        }
-        else {
-            obj.width = obj.height = 50;
-            if (obj.annotations && obj.annotations.length)
-                obj.annotations[0].style.color = this._session.theme.dark ? 'white' : 'black';
-            if (node && node.estimate) {
-                obj.style.strokeColor = this._session.theme.dark ? 'white' : 'black';
-                obj.style.opacity = obj.annotations[0].style.opacity = .6;
-                obj.style.fill = 'transparent';
-            }
-            else {
-                obj.style.strokeColor = this._accentColor;
-                obj.style.fill = recipient && recipient.pending ?
-                    this._session.getAccent(recipient.userId === this._session.userId ? 500 : 400) : 'transparent';
-            }
-            obj.style.strokeWidth = 2;
-        }
-        return obj;
-    }
-    /**
-     *
-     * @param connector
-     */
-    connDefaults(connector) {
-        connector.type = this.connectorType;
-        connector.cornerRadius = 6;
-        connector.targetDecorator.height = 7;
-        connector.targetDecorator.width = 7;
-        if (connector.addInfo.estimate) {
-            connector.style.strokeDashArray = '2 2';
-            connector.style.strokeColor =
-                connector.targetDecorator.style.fill =
-                    connector.targetDecorator.style.strokeColor =
-                        this._session.theme.dark ? 'white' : 'black';
-            connector.style.strokeWidth = 1;
-        }
-        else {
-            connector.style.strokeColor = connector.targetDecorator.style.strokeColor = connector.targetDecorator.style.fill = this._accentColor;
-            connector.style.strokeWidth = 2;
-        }
-        connector.targetDecorator.shape = 'None';
     }
     /** */
     async _prepare() {
         const { connectors: dconnectors, nodes: dnodes } = this.model.workflow;
         const indicators = [], connectors = [], nodes = [];
+        const color = this._session.theme.dark ? 'white' : 'black';
         let zIndex = 500;
         for (let node of dnodes) {
             if (nodes.find(n => n.id == node.id))
@@ -15328,10 +15277,18 @@ class FlowViewComponent extends TraceBase {
                 } while (r < recipients.length);
                 for (r = 0; r < recipients.length; r++) {
                     let recipient = recipients[r];
-                    const { annotation, tooltip } = await this._note(node, recipient);
-                    const content = this._tooltip(tooltip);
-                    const nod = {
-                        id: r === 0 ? node.id : node.id + r.toString(),
+                    const { annotation, tooltip } = await this._note(node, recipient), content = this._tooltip(tooltip), id = r === 0 ? node.id : node.id + r.toString();
+                    nodes.push({
+                        id,
+                        width: 50,
+                        height: 50,
+                        style: {
+                            strokeWidth: 2,
+                            opacity: node.estimate ? .6 : 1,
+                            strokeColor: node.estimate ? color : this._accentColor,
+                            fill: !node.estimate && recipient.pending ?
+                                this._session.getAccent(recipient.userId === this._session.userId ? 500 : 400) : 'transparent'
+                        },
                         shape: this._configuration[node.type].shape,
                         zIndex: zIndex++,
                         tooltip: {
@@ -15347,6 +15304,10 @@ class FlowViewComponent extends TraceBase {
                             node
                         },
                         annotations: [{
+                                style: {
+                                    color: color,
+                                    opacity: node.estimate ? .6 : 1,
+                                },
                                 content: annotation,
                                 margin: { top: 4 },
                                 verticalAlignment: 'Top',
@@ -15355,74 +15316,84 @@ class FlowViewComponent extends TraceBase {
                                     x: .5
                                 }
                             }]
-                    };
-                    nodes.push(nod);
+                    });
                     // add action indicator
                     if (recipient.action) {
                         const action = this._session.profile.actions.find(a => a.name === recipient.action);
-                        if (action.shape && !recipient.pending) {
-                            const actionIndicator = {
-                                id: nod.id + 'action',
+                        action.shape && !recipient.pending &&
+                            indicators.push({
+                                id: id + 'action',
+                                width: 15,
+                                height: 15,
                                 shape: {
                                     type: 'Path',
                                     data: action.shape,
                                     align: this.enableRtl ? 'XMinYMax' : 'XMaxYMax',
                                 },
                                 style: {
+                                    strokeWidth: 0,
                                     fill: action.color || this._session.getAccent(900)
                                 },
                                 addInfo: {
                                     indicator: true,
-                                    parentId: nod.id
+                                    parentId: id
                                 }
-                            };
-                            indicators.push(actionIndicator);
-                        }
+                            });
                     }
                     // fyi indicator
-                    if (recipient.fyi)
+                    recipient.fyi &&
                         indicators.push({
-                            id: nod.id + 'fyi',
+                            id: id + 'fyi',
+                            width: 15,
+                            height: 15,
                             shape: {
                                 type: 'Path',
                                 data: FYI_PATH,
                                 align: this.enableRtl ? 'XMinYMax' : 'XMaxYMax'
                             },
                             style: {
+                                strokeWidth: 0,
                                 fill: '#1976d2'
                             },
                             addInfo: {
                                 indicator: true,
-                                parentId: nod.id
+                                parentId: id
                             }
                         });
                     // escalate indicator
-                    if (recipient.escalated) {
-                        const escalateIndicator = {
-                            id: nod.id + 'escalate',
+                    recipient.escalated &&
+                        indicators.push({
+                            id: id + 'escalate',
+                            width: 15,
+                            height: 15,
                             shape: {
                                 type: 'Path',
                                 data: ESCALATED_PATH,
                                 align: this.enableRtl ? 'XMinYMax' : 'XMaxYMax'
                             },
                             style: {
+                                strokeWidth: 0,
                                 fill: this._session.getAccent(900)
                             },
                             addInfo: {
                                 indicator: true,
-                                parentId: nod.id
+                                parentId: id
                             }
-                        };
-                        indicators.push(escalateIndicator);
-                    }
+                        });
                 }
             }
             else {
-                const { state, annotation, tooltip } = await this._shape(node);
-                const { shape } = configuration;
-                const content = this._tooltip(tooltip);
+                const { state, annotation, tooltip } = await this._shape(node), { shape } = configuration, content = this._tooltip(tooltip);
                 nodes.push({
                     id: node.id,
+                    width: 50,
+                    height: 50,
+                    style: {
+                        strokeWidth: 2,
+                        opacity: node.estimate ? .6 : 1,
+                        strokeColor: node.estimate ? color : this._accentColor,
+                        fill: 'transparent'
+                    },
                     shape, //: {type: 'Path', data: ELLIPSIS },
                     zIndex: zIndex++,
                     tooltip: {
@@ -15441,19 +15412,25 @@ class FlowViewComponent extends TraceBase {
                             offset: shape.type === 'Path' ? {
                                 y: 1
                             } : { x: .5 },
-                            style: {},
+                            style: {
+                                color: color,
+                                opacity: node.estimate ? .6 : 1,
+                            },
                             verticalAlignment: shape.type === 'Path' ? 'Top' : 'Center'
                         }]
                 });
-                if (state && state.shape && !node.estimate)
+                state && state.shape && !node.estimate &&
                     indicators.push({
                         id: node.id + 'state',
+                        width: 15,
+                        height: 15,
                         shape: {
                             type: 'Path',
                             data: state.shape,
                             align: this.enableRtl ? 'XMaxYMax' : 'XMinYMax'
                         },
                         style: {
+                            strokeWidth: 0,
                             fill: state.color || 'black'
                         },
                         addInfo: {
@@ -15462,49 +15439,52 @@ class FlowViewComponent extends TraceBase {
                             node: node
                         }
                     });
-                if (node.error) {
-                    const warnningIndicator = {
+                node.error &&
+                    indicators.push({
                         id: node.id + 'exception',
+                        width: 15,
+                        height: 15,
                         shape: {
                             type: 'Path',
                             data: WARNNING_PATH$1,
                             align: this.enableRtl ? 'XMinYMax' : 'XMaxYMax'
                         },
                         style: {
+                            strokeWidth: 0,
                             fill: getWarn(800)
                         },
                         addInfo: {
                             indicator: true,
                             parentId: node.id
                         }
-                    };
-                    indicators.push(warnningIndicator);
-                }
+                    });
             }
         }
         // TODO
         // longest path, remove short path connectors
-        function deepen(nodeId, depth = 0) {
-            nodes.filter(n => n.addInfo.node.id === nodeId).
-                forEach(n => {
-                const { depth: nodeDepth } = n.addInfo;
-                if (nodeDepth) {
-                    if (nodeDepth < depth) {
-                        dconnectors.filter(c => c.targetId === nodeId &&
-                            nodes.filter(n => n.addInfo.node.id === c.sourceId &&
-                                n.addInfo.depth === nodeDepth - 1).length).
-                            forEach(c => dconnectors.remove(c));
-                        n.addInfo.depth = depth;
-                    }
-                    else if (nodeDepth > depth)
-                        dconnectors.filter(c => c.sourceId === nodeId).forEach(c => dconnectors.remove(c));
-                }
-                else {
-                    n.addInfo.depth = depth;
-                    dconnectors.filter(c => c.sourceId === nodeId).forEach(c => deepen(c.targetId, depth + 1));
-                }
-            });
-        }
+        //function deepen(nodeId: string, depth = 0) {
+        //  nodes.filter(n => (n.addInfo as NodeInfoModel).node.id === nodeId).
+        //    forEach(n => {
+        //      const { depth: nodeDepth } = n.addInfo as NodeInfoModel;
+        //      if (nodeDepth) {
+        //        if (nodeDepth < depth) {
+        //          dconnectors.filter(c => c.targetId === nodeId &&
+        //            nodes.filter(n => (n.addInfo as NodeInfoModel).node.id === c.sourceId &&
+        //              (n.addInfo as NodeInfoModel).depth === nodeDepth - 1).length).
+        //            forEach(c =>
+        //              dconnectors.remove(c)
+        //            );
+        //          (n.addInfo as NodeInfoModel).depth = depth;
+        //        } else if (nodeDepth > depth)
+        //          dconnectors.filter(c => c.sourceId === nodeId).forEach(c => dconnectors.remove(c));
+        //      } else {
+        //        (n.addInfo as NodeInfoModel).depth = depth;
+        //        dconnectors.filter(c => c.sourceId === nodeId).forEach(c =>
+        //          deepen(c.targetId, depth + 1)
+        //        );
+        //      }
+        //    });
+        //}
         for (let connector of dconnectors) {
             let sources = nodes.filter(n => n.addInfo.node.id === connector.sourceId), targets = nodes.filter(n => n.addInfo.node.id === connector.targetId);
             for (let source of sources)
@@ -15512,6 +15492,28 @@ class FlowViewComponent extends TraceBase {
                     connectors.push({
                         sourceID: source.id,
                         targetID: target.id,
+                        type: this.connectorType,
+                        cornerRadius: 6,
+                        targetDecorator: {
+                            shape: 'None',
+                            height: 7,
+                            width: 7,
+                            style: connector.estimate ? {
+                                fill: color,
+                                strokeColor: color
+                            } : {
+                                strokeColor: this._accentColor,
+                                fill: this._accentColor
+                            },
+                        },
+                        style: connector.estimate ? {
+                            strokeDashArray: '2 2',
+                            strokeColor: color,
+                            strokeWidth: 1
+                        } : {
+                            strokeColor: this._accentColor,
+                            strokeWidth: 2
+                        },
                         addInfo: {
                             estimate: connector.estimate,
                             time: connector.time
@@ -19123,6 +19125,9 @@ class SlotsComponent {
         this._selectedTabIndex = value;
         this._setTabAnimation();
     }
+    get selectedTab() {
+        return this.tabs[this.selectedTabIndex];
+    }
     constructor(data, _session, _cd, _router, _title, _injector) {
         this._session = _session;
         this._cd = _cd;
@@ -20214,7 +20219,7 @@ class SlotsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if (!dialog) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      @if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:0}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             panesAnimation,
             paneAnimation,
             paramAnimation,
@@ -20232,7 +20237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if (!dialog) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      @if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:0}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
+                    ], template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PANES_DATA]
@@ -20626,11 +20631,11 @@ class AdminMenuComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AdminMenuComponent, deps: [{ token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: { collapsed: "collapsed" }, ngImport: i0, template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-headline-5\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  @if (!collapsed) {\r\n  <h3 mat-subheader>{{'Workflow'|translate}}</h3>\r\n  }\r\n  @for (f of profile.forms; track f) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon|| 'description'}}</mat-icon>\r\n    <span matListItemTitle>{{f.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n  <mat-divider></mat-divider>\r\n\r\n  @if (!collapsed) {\r\n  <h3 mat-subheader>{{'Tools'|translate}}</h3>\r\n  }\r\n\r\n  @for (u of profile.utilities; track u) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/tools\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matListItemTitle>{{u.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n", dependencies: [{ kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "directive", type: SlotRouterDirective, selector: "[slotRouterLink]", inputs: ["slotRouterLink", "slotRouterLinkActive", "slotRouterLinkDisabled", "slotRouterLinkPolicy", "slotRouterLinkOptions"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: { collapsed: "collapsed" }, ngImport: i0, template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-headline-5\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  <!--@if (!collapsed) {\r\n  <h3 mat-subheader>{{'Workflow'|translate}}</h3>\r\n  }\r\n  @for (f of profile.forms; track f) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon|| 'description'}}</mat-icon>\r\n    <span matListItemTitle>{{f.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n  <mat-divider></mat-divider>-->\r\n\r\n  @if (!collapsed) {\r\n  <h3 mat-subheader>{{'Tools'|translate}}</h3>\r\n  }\r\n\r\n  @for (u of profile.utilities; track u) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/tools\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matListItemTitle>{{u.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n", dependencies: [{ kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "directive", type: SlotRouterDirective, selector: "[slotRouterLink]", inputs: ["slotRouterLink", "slotRouterLinkActive", "slotRouterLinkDisabled", "slotRouterLinkPolicy", "slotRouterLinkOptions"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AdminMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-admin-menu', template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-headline-5\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  @if (!collapsed) {\r\n  <h3 mat-subheader>{{'Workflow'|translate}}</h3>\r\n  }\r\n  @for (f of profile.forms; track f) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon|| 'description'}}</mat-icon>\r\n    <span matListItemTitle>{{f.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n  <mat-divider></mat-divider>\r\n\r\n  @if (!collapsed) {\r\n  <h3 mat-subheader>{{'Tools'|translate}}</h3>\r\n  }\r\n\r\n  @for (u of profile.utilities; track u) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/tools\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matListItemTitle>{{u.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n" }]
+            args: [{ selector: 'bizdoc-admin-menu', template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-headline-5\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  <!--@if (!collapsed) {\r\n  <h3 mat-subheader>{{'Workflow'|translate}}</h3>\r\n  }\r\n  @for (f of profile.forms; track f) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon|| 'description'}}</mat-icon>\r\n    <span matListItemTitle>{{f.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n  <mat-divider></mat-divider>-->\r\n\r\n  @if (!collapsed) {\r\n  <h3 mat-subheader>{{'Tools'|translate}}</h3>\r\n  }\r\n\r\n  @for (u of profile.utilities; track u) {\r\n  <mat-list-item [slotRouterLink]='[\"admin/tools\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListItemIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matListItemTitle>{{u.title}}</span>\r\n  </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n" }]
         }], ctorParameters: () => [{ type: SessionService }], propDecorators: { collapsed: [{
                 type: Input
             }] } });
@@ -21466,7 +21471,7 @@ const PANES_CONFIG = [
                         ]
                     }, {
                         path: 'trace',
-                        icon: 'footprint',
+                        icon: 'timeline',
                         component: TracePaneComponent,
                         policy: OpenPolicy.Tab | OpenPolicy.Expandable
                     }, {
@@ -22328,7 +22333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
 
 class SyncfusionDiagramModule {
     constructor() {
-        Diagram$1.Inject(ComplexHierarchicalTree, BpmnDiagrams$1, DataBinding, LineDistribution, LineRouting, ConnectorBridging$1 /*, LayoutAnimation*/);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SyncfusionDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SyncfusionDiagramModule, imports: [CommonModule,
@@ -22356,6 +22360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService]
                 }]
         }], ctorParameters: () => [] });
+Diagram$1.Inject(ComplexHierarchicalTree, BpmnDiagrams$1, DataBinding, LineDistribution, LineRouting, ConnectorBridging$1, LayoutAnimation);
 
 class SyncfusionGridModule {
     constructor() {
@@ -34115,11 +34120,11 @@ class DesignerItemComponent {
         this._destroy?.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DesignerItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.FormBuilder }, { token: i2$1.DomSanitizer }, { token: DesignerRef }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", context: "context" }, outputs: { onSave: "save", onContinue: "continue" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "addContent", first: true, predicate: AddContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }, { propertyName: "customContents", predicate: CustomContentDirective }], usesOnChanges: true, ngImport: i0, template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  <ng-container [ngTemplateOutlet]=\"addContent?.templateRef\"></ng-container>\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", context: "context" }, outputs: { onSave: "save", onContinue: "continue" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "addContent", first: true, predicate: AddContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }, { propertyName: "customContents", predicate: CustomContentDirective }], usesOnChanges: true, ngImport: i0, template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  <ng-container [ngTemplateOutlet]=\"addContent?.templateRef\"></ng-container>\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1;width:100%}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DesignerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-element', template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  <ng-container [ngTemplateOutlet]=\"addContent?.templateRef\"></ng-container>\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
+            args: [{ selector: 'bizdoc-designer-element', template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  <ng-container [ngTemplateOutlet]=\"addContent?.templateRef\"></ng-container>\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1;width:100%}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.FormBuilder }, { type: i2$1.DomSanitizer }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -35321,8 +35326,8 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         eclone = clone(eclone); // deep
         const injector = this._createInjector(eclone, section.elements, mode);
         return new Promise((resolve, reject) => this._panes.navigate(section.comp, {
-            policy: mode === 'add' ? OpenPolicy.Dialog | OpenPolicy.Stretch :
-                OpenPolicy.Tab | OpenPolicy.Toggle | OpenPolicy.Defer,
+            policy: mode === 'add' ? OpenPolicy.Dialog : OpenPolicy.Tab & ~OpenPolicy.Dismissable
+                | OpenPolicy.Toggle | OpenPolicy.Defer,
             group: this._translate.get(section.title),
             //title,
             injector: injector