@bizdoc/core 1.15.6 → 1.15.7

package/fesm2020/bizdoc-core.mjs

@@ -5,8 +5,8 @@ import { OverlayRef, OverlayConfig, OverlayModule, CdkScrollable } from '@angula
 import { ComponentPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import { trigger, state, style, transition, animate, query, stagger, animateChild, keyframes } from '@angular/animations';
 import { ESCAPE, RIGHT_ARROW, LEFT_ARROW, ENTER, COMMA, UP_ARROW, DOWN_ARROW, SEMICOLON } from '@angular/cdk/keycodes';
-import { Subject, Observable, of, fromEvent, forkJoin, interval, takeWhile, tap as tap$1, BehaviorSubject, filter as filter$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, from, merge, map as map$1, shareReplay as shareReplay$1, first as first$1, throwError, switchMap as switchMap$1, isObservable, EMPTY } from 'rxjs';
-import { map, tap, filter, switchMap, takeUntil, shareReplay, debounceTime, take, first, catchError, startWith, finalize } from 'rxjs/operators';
+import { Subject, Observable, of, fromEvent, forkJoin, interval, takeWhile, shareReplay, tap as tap$1, BehaviorSubject, filter as filter$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, from, merge, map as map$1, first as first$1, throwError, switchMap as switchMap$1, isObservable, EMPTY } from 'rxjs';
+import { map, tap, filter, switchMap, takeUntil, shareReplay as shareReplay$1, debounceTime, take, first, catchError, startWith, finalize } from 'rxjs/operators';
 import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
 import dayjs from 'dayjs';
 import * as firebase from 'firebase/app';
@@ -65,7 +65,7 @@ import { MatDatepickerIntl, MatDatepickerModule } from '@angular/material/datepi
 import * as i10$1 from '@angular/cdk/text-field';
 import * as i3$2 from '@syncfusion/ej2-angular-richtexteditor';
 import { ToolbarType, RichTextEditorComponent, RichTextEditor, Toolbar, HtmlEditor, RichTextEditorModule, HtmlEditorService, ToolbarService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
-import * as i3$3 from '@angular/cdk/bidi';
+import * as i1$5 from '@angular/cdk/bidi';
 import * as i8 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i8$1 from '@angular/material/snack-bar';
@@ -77,7 +77,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i6$1 from '@angular/material/chips';
 import { MatChipsModule, MatChipList, MatChipInput } from '@angular/material/chips';
 import * as i11$1 from '@angular/cdk/drag-drop';
-import { DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { LayoutModule } from '@angular/cdk/layout';
 import * as i9$4 from '@angular/material/expansion';
 import { MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';
@@ -478,14 +478,21 @@ function mapToArray(map) {
 function isImage(contentType) {
     return IMAGE_TYPE.indexOf(contentType) > -1;
 }
-function cleanup$1(params) {
+function cleanup(params) {
     Object.keys(params).forEach(k => {
         const val = params[k];
-        if (val === null || val === undefined || (isArray(val) && !val.length))
+        if (val === null || val === undefined)
             delete params[k];
+        else if (typeof val === 'string' || val instanceof Date || typeof val === 'boolean')
+            return;
+        else if (Array.isArray(val)) {
+            if (val.length === 0)
+                return;
+            val.forEach(e => cleanup(e));
+        }
         else if (isObject(val)) {
-            cleanup$1(val);
-            if (!Object.keys(val).length)
+            cleanup(val);
+            if (Object.keys(val).length === 0)
                 delete params[k];
         }
     });
@@ -3438,7 +3445,7 @@ class MailboxService {
     }
     findAll(filter, options) {
         const params = { ...filter, ...options };
-        cleanup$1(params);
+        cleanup(params);
         return this._http.get('/api/mail', { params });
     }
     create(form) {
@@ -3493,7 +3500,7 @@ class MailboxService {
         //        return throwError({ status: res.status, error: res.body });
         //    }))
         //  }), this._notify<T>());
-        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}`, cleanup$1(model), { params })), this._notify());
+        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}`, model, { params })), this._notify());
     }
     delete(id) {
         return this._http.delete(`/api/mail/${id}`).pipe(tap(() => this._delete$.next(id)));
@@ -4065,11 +4072,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: [TimespanInput]
             }] } });
 
+class SystemService {
+    constructor(_http) {
+        this._http = _http;
+    }
+    rules(args) {
+        return this._http.get(`/api/system/form/rules`, { params: args });
+    }
+    synchrinize(name) {
+        return this._http.post(`/api/system/cube/${name}/synchronize`, {});
+    }
+    findAll(options) {
+        const params = {};
+        if (isString(options))
+            params['search'] = options;
+        else {
+            if (options.search)
+                params['search'] = options.search;
+            if (options.formId)
+                params['formId'] = options.formId;
+            if (options.start)
+                params['start'] = new Date(options.start).toISOString();
+            if (options.end)
+                params['end'] = new Date(options.end).toISOString();
+        }
+        return this._http.get('/api/system/form/findAll', {
+            params
+        });
+    }
+    roles() {
+        return SystemService._cache['roles'] || (SystemService._cache['roles'] =
+            this._http.get('/api/system/positions/roles').pipe(shareReplay()));
+    }
+    range(formId) {
+        return this._http.get('/api/system/form/range', {
+            params: { formId: formId || null }
+        }).pipe(tap$1(r => r.forEach(p => p.date = new Date(p.date))));
+    }
+    cube(name) {
+        return this._http.get(`/api/system/cube/${name}`);
+    }
+    form(name) {
+        return this._http.get(`/api/system/form/${name}`);
+    }
+    save(form) {
+        const { workflow } = form;
+        return this._http.put(`/api/system/form/${form.name}`, { workflow });
+    }
+}
+SystemService._cache = {};
+SystemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SystemService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+SystemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SystemService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SystemService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
 class AceInput {
-    constructor(ngControl, _el, _http) {
+    constructor(ngControl, _el, _service) {
         this.ngControl = ngControl;
         this._el = _el;
-        this._http = _http;
+        this._service = _service;
         this._required = false;
         this._disabled = false;
         this.stateChanges = new Subject();
@@ -4082,9 +4144,6 @@ class AceInput {
             this.ngControl.valueAccessor = this;
         }
     }
-    focus() {
-        this._editor.focus();
-    }
     get placeholder() {
         return this._placeholder;
     }
@@ -4142,11 +4201,11 @@ class AceInput {
             enableLiveAutocompletion: true
         });
         this._editor.setValue(this._value || '');
-        const rules = this._http.get(`/api/form/rules`, { params: this.params });
+        const rules = this._service.rules(this.params).pipe(shareReplay());
         this._editor.addEventListener('change', () => {
             const val = this._editor.getValue();
-            this._value = val;
-            this._onChange(val);
+            this._value = val.length > 0 ? val : null;
+            this._onChange(this._value);
         });
         this._editor.addEventListener('focus', () => {
             this.focused = true;
@@ -4155,18 +4214,19 @@ class AceInput {
         this._editor.addEventListener('blur', () => this.focused = false);
         brace.acequire("ace/ext/language_tools").addCompleter({
             getCompletions: (_editor, _session, _pos, _prefix, callback) => {
-                rules.subscribe(r => callback(null, Object.keys(r).map(n => {
-                    return { name: n, value: n, score: 1, meta: 'BizDoc' };
-                })));
+                rules.subscribe(r => callback(null, r.map(r => ({ name: r.title, value: r.name, score: 1, meta: 'BizDoc' }))));
             }
         });
     }
+    focus() {
+        this._editor.focus();
+    }
     ngOnDestroy() {
         this.stateChanges.complete();
     }
 }
 AceInput.nextId = 0;
-AceInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AceInput, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+AceInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AceInput, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: SystemService }], target: i0.ɵɵFactoryTarget.Component });
 AceInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AceInput, selector: "bizdoc-ace-input", inputs: { params: "params", placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: AceInput }], ngImport: i0, template: `<div></div>`, isInline: true, styles: [":host ::ng-deep textarea{position:unset}\n", ":host ::ng-deep .ace_scrollbar.ace_scrollbar-h{height:5px!important}\n", ":host ::ng-deep .ace_editor{min-height:50px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AceInput, decorators: [{
             type: Component,
@@ -4175,7 +4235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i0.ElementRef }, { type: i1.HttpClient }]; }, propDecorators: { id: [{
+                }] }, { type: i0.ElementRef }, { type: SystemService }]; }, propDecorators: { id: [{
                 type: HostBinding
             }], params: [{
                 type: Input
@@ -4287,7 +4347,7 @@ class DatasourceService {
             const dataSource = this._http.get(`/api/datatype/${type}`, {
                 params
             });
-            observe = this._cache[cacheId] = dataSource.pipe(shareReplay());
+            observe = this._cache[cacheId] = dataSource.pipe(shareReplay$1());
         }
         return observe;
     }
@@ -5212,8 +5272,8 @@ class AttachmentPreview {
         this.animationState = 'leave';
     }
 }
-AttachmentPreview.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentPreview, deps: [{ token: i3$3.Directionality }, { token: i0.Renderer2 }, { token: FILE_PREVIEW_DIALOG_DATA }, { token: i1$1.DomSanitizer }, { token: MailboxService }, { token: i1$2.OverlayRef }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentPreview.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AttachmentPreview, selector: "bizdoc-attachment-preview", host: { listeners: { "document:resize": "resize()", "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "obj", first: true, predicate: ["obj"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"overlay-content\" [@slideContent]=\"animationState\" (@slideContent.start)=\"onAnimationStart($event)\"\r\n     [dir]=\"dir\" (@slideContent.done)=\"onAnimationDone($event)\">\r\n  <div class=\"toolbar-wrapper\" fxLayout=\"row\" [@slideDown]=\"slideDown\" *ngIf=\"!loading\">\r\n    <button mat-icon-button (click)=\"close()\" bizdocTooltip=\"{{'Back' | translate}}\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n    <span class=\"mat-body-1\">{{data.file.fileName}}</span>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"rotate()\" bizdocTooltip=\"{{'Rotate' | translate }}\"><mat-icon>screen_rotation</mat-icon></button>\r\n    <button mat-icon-button (click)=\"download()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  </div>\r\n  <div class=\"spinner-wrapper\" *ngIf=\"loading\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  <object (load)=\"onLoad($event)\" [data]=\"objectData\" [type]=\"data.file.contentType\" *ngIf=\"!isImage\" #obj width=\"250\"\r\n          height=\"200\">\r\n  </object>\r\n  <img *ngIf=\"isImage\" (load)=\"onLoad($event)\" [style.opacity]=\"loading ? 0 : 1\" [@fade]=\"loading ? 'fadeOut' : 'fadeIn'\" [src]=\"objectData\" #img>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center}.spinner-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}img{width:100%;max-width:500px;height:auto}.overlay-content{padding:1em}.overlay-content .toolbar-wrapper{align-items:center;color:#f5f5f5}.divider{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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: [
+AttachmentPreview.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentPreview, deps: [{ token: i1$5.Directionality }, { token: i0.Renderer2 }, { token: FILE_PREVIEW_DIALOG_DATA }, { token: i1$1.DomSanitizer }, { token: MailboxService }, { token: i1$2.OverlayRef }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentPreview.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AttachmentPreview, selector: "bizdoc-attachment-preview", host: { listeners: { "document:resize": "resize()", "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "obj", first: true, predicate: ["obj"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"overlay-content\" [@slideContent]=\"animationState\" (@slideContent.start)=\"onAnimationStart($event)\"\r\n     [dir]=\"dir\" (@slideContent.done)=\"onAnimationDone($event)\">\r\n  <div class=\"toolbar-wrapper\" fxLayout=\"row\" [@slideDown]=\"slideDown\" *ngIf=\"!loading\">\r\n    <button mat-icon-button (click)=\"close()\" bizdocTooltip=\"{{'Back' | translate}}\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n    <span class=\"mat-body-1\">{{data.file.fileName}}</span>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"rotate()\" bizdocTooltip=\"{{'Rotate' | translate }}\"><mat-icon>screen_rotation</mat-icon></button>\r\n    <button mat-icon-button (click)=\"download()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  </div>\r\n  <div class=\"spinner-wrapper\" *ngIf=\"loading\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  <object (load)=\"onLoad($event)\" [data]=\"objectData\" [type]=\"data.file.contentType\" *ngIf=\"!isImage\" #obj width=\"250\"\r\n          height=\"200\">\r\n  </object>\r\n  <img *ngIf=\"isImage\" (load)=\"onLoad($event)\" [style.opacity]=\"loading ? 0 : 1\" [@fade]=\"loading ? 'fadeOut' : 'fadeIn'\" [src]=\"objectData\" #img>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center}.spinner-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}img{width:100%;max-width:500px;height:auto}.overlay-content{padding:1em}.overlay-content .toolbar-wrapper{align-items:center;color:#f5f5f5}.divider{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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: [
         trigger('fade', [
             state('fadeOut', style({ opacity: 0 })),
             state('fadeIn', style({ opacity: 1 })),
@@ -5253,7 +5313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                             transition('* => *', animate(ANIMATION_TIMINGS)),
                         ])
                     ], template: "<div class=\"overlay-content\" [@slideContent]=\"animationState\" (@slideContent.start)=\"onAnimationStart($event)\"\r\n     [dir]=\"dir\" (@slideContent.done)=\"onAnimationDone($event)\">\r\n  <div class=\"toolbar-wrapper\" fxLayout=\"row\" [@slideDown]=\"slideDown\" *ngIf=\"!loading\">\r\n    <button mat-icon-button (click)=\"close()\" bizdocTooltip=\"{{'Back' | translate}}\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n    <span class=\"mat-body-1\">{{data.file.fileName}}</span>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"rotate()\" bizdocTooltip=\"{{'Rotate' | translate }}\"><mat-icon>screen_rotation</mat-icon></button>\r\n    <button mat-icon-button (click)=\"download()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  </div>\r\n  <div class=\"spinner-wrapper\" *ngIf=\"loading\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  <object (load)=\"onLoad($event)\" [data]=\"objectData\" [type]=\"data.file.contentType\" *ngIf=\"!isImage\" #obj width=\"250\"\r\n          height=\"200\">\r\n  </object>\r\n  <img *ngIf=\"isImage\" (load)=\"onLoad($event)\" [style.opacity]=\"loading ? 0 : 1\" [@fade]=\"loading ? 'fadeOut' : 'fadeIn'\" [src]=\"objectData\" #img>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center}.spinner-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}img{width:100%;max-width:500px;height:auto}.overlay-content{padding:1em}.overlay-content .toolbar-wrapper{align-items:center;color:#f5f5f5}.divider{flex:1 1 auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3$3.Directionality }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.Directionality }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FILE_PREVIEW_DIALOG_DATA]
                 }] }, { type: i1$1.DomSanitizer }, { type: MailboxService }, { type: i1$2.OverlayRef }]; }, propDecorators: { obj: [{
@@ -5307,11 +5367,11 @@ class AttachmentInfo {
         item.viewed = new Date();
     }
 }
-AttachmentInfo.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentInfo, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }, { token: i3$3.Directionality }], target: i0.ɵɵFactoryTarget.Injectable });
+AttachmentInfo.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentInfo, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }, { token: i1$5.Directionality }], target: i0.ɵɵFactoryTarget.Injectable });
 AttachmentInfo.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentInfo });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentInfo, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.Injector }, { type: i3$3.Directionality }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.Injector }, { type: i1$5.Directionality }]; } });
 
 /** ask component*/
 class AskDialog {
@@ -6275,7 +6335,7 @@ class AccountService {
         return forkJoin(ids.map(i => this.get(i)));
     }
     get(id) {
-        return this._cache[id] || (this._cache[id] = this._http.get(`/api/account/info/${id}`).pipe(shareReplay()));
+        return this._cache[id] || (this._cache[id] = this._http.get(`/api/account/info/${id}`).pipe(shareReplay$1()));
     }
     findAll(name, options) {
         const params = { ...options };
@@ -6745,7 +6805,7 @@ class CubeService {
         this._type = _type;
         this._session = _session;
         this._cache = {};
-        this._cacheOr = (name, fn) => this._cache[name] || (this._cache[name] = fn().pipe(shareReplay()));
+        this._cacheOr = (name, fn) => this._cache[name] || (this._cache[name] = fn().pipe(shareReplay$1()));
         _config && _config.currencyCode && setCurrencyCode(_config.currencyCode);
     }
     /** system currency */
@@ -7327,7 +7387,7 @@ class BrowseFilterComponent {
                 pipe(debounceTime(250), filter(v => isString(v)), takeUntil(this._destroy), switchMap(v => this._mailbox.senders(v)));
         this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(FILTER_DEBOUNCE)).subscribe(v => {
             const value = { ...v };
-            cleanup$1(value);
+            cleanup(value);
             this.valuesChange.emit(value);
         });
         this._initialize();
@@ -7378,7 +7438,7 @@ class BrowseFilterComponent {
     }
     axesChange(axes) {
         const value = { ...this.form.value, ...axes };
-        cleanup$1(value);
+        cleanup(value);
         this.valuesChange.emit(value);
     }
     toggleTag(tag) {
@@ -7769,12 +7829,12 @@ class AttachmentsComponent {
             this._sb.ask('DeleteFileAsk', 'DeleteFile', { color: 'warn' }).subscribe(ok => ok && task());
     }
 }
-AttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentsComponent, deps: [{ token: MailboxService }, { token: SessionService }, { token: i0.ViewContainerRef }, { token: PromptService }, { token: i1$2.Overlay }, { token: i0.Injector }, { token: i3$3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentsComponent, deps: [{ token: MailboxService }, { token: SessionService }, { token: i0.ViewContainerRef }, { token: PromptService }, { token: i1$2.Overlay }, { token: i0.Injector }, { token: i1$5.Directionality }], target: i0.ɵɵFactoryTarget.Component });
 AttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: { model: "model", viewedIndicator: "viewedIndicator", includeDeleted: "includeDeleted" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let a of attachments\">\r\n  <button mat-button class=\"attachment-link\" [matMenuTriggerFor]=\"attachment\" [bizdocTooltip]=\"a.time | amCalendar\" [progressIndicator]=\"a.progress\">\r\n    <mat-icon *ngIf=\"viewedIndicator && a.viewed\">done_all</mat-icon>\r\n    <!--[bizdocTooltip]=\"a.viewed | amCalendar\"-->\r\n    <mat-icon>attachment</mat-icon>&nbsp;\r\n    <span [class.deleted]=\"a.deleted\" [class.failed]=\"a.failed\">{{a.fileName}}</span>\r\n  </button>\r\n  <mat-menu #attachment>\r\n    <ng-container *ngIf=\"!a.failed\">\r\n      <button mat-menu-item (click)=\"download(a)\">{{\"Download\" | translate}}</button>\r\n      <button mat-menu-item *ngIf=\"canPreview(a)\" (click)=\"preview(a)\"><mat-icon>landscape</mat-icon> {{\"Preview\" | translate}}</button>\r\n      <ng-container *ngIf=\"hasVersion(a)\">\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item *ngFor=\"let v of getVersions(a)\" (click)=\"previewOrDownload(v)\">{{v.time |  amCalendar}}</button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"canDelete(a)\">\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"discard(a)\">{{\"Discard\" | translate}}</button>\r\n      </ng-container>\r\n    </ng-container>\r\n    <button mat-menu-item (click)=\"cancel(a)\" *ngIf=\"a.failed\">{{\"Cancel\" | translate}}</button>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:flex;flex-flow:wrap}.attachment-link.failed{color:red}.attachment-link .deleted{text-decoration:line-through}::ng-deep button .progress{background-color:#696969;position:absolute;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ProgressDirective, selector: "[progressIndicator]", inputs: ["progressIndicator"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AttachmentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-attachments', template: "<div *ngFor=\"let a of attachments\">\r\n  <button mat-button class=\"attachment-link\" [matMenuTriggerFor]=\"attachment\" [bizdocTooltip]=\"a.time | amCalendar\" [progressIndicator]=\"a.progress\">\r\n    <mat-icon *ngIf=\"viewedIndicator && a.viewed\">done_all</mat-icon>\r\n    <!--[bizdocTooltip]=\"a.viewed | amCalendar\"-->\r\n    <mat-icon>attachment</mat-icon>&nbsp;\r\n    <span [class.deleted]=\"a.deleted\" [class.failed]=\"a.failed\">{{a.fileName}}</span>\r\n  </button>\r\n  <mat-menu #attachment>\r\n    <ng-container *ngIf=\"!a.failed\">\r\n      <button mat-menu-item (click)=\"download(a)\">{{\"Download\" | translate}}</button>\r\n      <button mat-menu-item *ngIf=\"canPreview(a)\" (click)=\"preview(a)\"><mat-icon>landscape</mat-icon> {{\"Preview\" | translate}}</button>\r\n      <ng-container *ngIf=\"hasVersion(a)\">\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item *ngFor=\"let v of getVersions(a)\" (click)=\"previewOrDownload(v)\">{{v.time |  amCalendar}}</button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"canDelete(a)\">\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"discard(a)\">{{\"Discard\" | translate}}</button>\r\n      </ng-container>\r\n    </ng-container>\r\n    <button mat-menu-item (click)=\"cancel(a)\" *ngIf=\"a.failed\">{{\"Cancel\" | translate}}</button>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:flex;flex-flow:wrap}.attachment-link.failed{color:red}.attachment-link .deleted{text-decoration:line-through}::ng-deep button .progress{background-color:#696969;position:absolute;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: MailboxService }, { type: SessionService }, { type: i0.ViewContainerRef }, { type: PromptService }, { type: i1$2.Overlay }, { type: i0.Injector }, { type: i3$3.Directionality }]; }, propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: MailboxService }, { type: SessionService }, { type: i0.ViewContainerRef }, { type: PromptService }, { type: i1$2.Overlay }, { type: i0.Injector }, { type: i1$5.Directionality }]; }, propDecorators: { model: [{
                 type: Input
             }], viewedIndicator: [{
                 type: Input
@@ -8166,12 +8226,12 @@ class ExpandedItemComponent {
         this._typingTask && clearTimeout(this._typingTask);
     }
 }
-ExpandedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ExpandedItemComponent, deps: [{ token: PromptService }, { token: ChatInfo }, { token: AccountService }, { token: MailboxService }, { token: SessionService }, { token: i3$3.Directionality }, { token: i2$3.MatDialog }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component });
+ExpandedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ExpandedItemComponent, deps: [{ token: PromptService }, { token: ChatInfo }, { token: AccountService }, { token: MailboxService }, { token: SessionService }, { token: i1$5.Directionality }, { token: i2$3.MatDialog }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component });
 ExpandedItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "<div class=\"summary\" *ngIf=\"model.summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  <ng-container *ngFor=\"let a of actions\">\r\n    <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" *ngIf=\"a.icon\" class=\"tool\">\r\n      <mat-icon>{{a.icon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small\" fxLayout=\"row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div fxLayoutAlign=\"center center\">\r\n    <span class=\"mat-small\" *ngIf=\"typing\">{{'SomeoneTyping'|translate}}</span>\r\n    <div *ngIf=\"model.comments.length\" class=\"mat-small\">\r\n      <span *ngIf=\"!newComments; else newcomments\">{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"model.tags\">\r\n    <span *ngFor=\"let tag of model.tags\" class=\"mat-chip mat-standard-chip small-chip\">{{tag}}</span>\r\n  </div>\r\n</div>\r\n<ng-template #newcomments>\r\n  <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:-moz-fit-content;max-width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { kind: "component", type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: StatePipe, name: "state" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ExpandedItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-expanded-item', template: "<div class=\"summary\" *ngIf=\"model.summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  <ng-container *ngFor=\"let a of actions\">\r\n    <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" *ngIf=\"a.icon\" class=\"tool\">\r\n      <mat-icon>{{a.icon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small\" fxLayout=\"row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div fxLayoutAlign=\"center center\">\r\n    <span class=\"mat-small\" *ngIf=\"typing\">{{'SomeoneTyping'|translate}}</span>\r\n    <div *ngIf=\"model.comments.length\" class=\"mat-small\">\r\n      <span *ngIf=\"!newComments; else newcomments\">{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"model.tags\">\r\n    <span *ngFor=\"let tag of model.tags\" class=\"mat-chip mat-standard-chip small-chip\">{{tag}}</span>\r\n  </div>\r\n</div>\r\n<ng-template #newcomments>\r\n  <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:-moz-fit-content;max-width:fit-content}\n"] }]
-        }], ctorParameters: function () { return [{ type: PromptService }, { type: ChatInfo }, { type: AccountService }, { type: MailboxService }, { type: SessionService }, { type: i3$3.Directionality }, { type: i2$3.MatDialog }, { type: TranslateService }, { type: HubService }]; }, propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: PromptService }, { type: ChatInfo }, { type: AccountService }, { type: MailboxService }, { type: SessionService }, { type: i1$5.Directionality }, { type: i2$3.MatDialog }, { type: TranslateService }, { type: HubService }]; }, propDecorators: { model: [{
                 type: Input
             }], sent: [{
                 type: Output
@@ -8427,7 +8487,7 @@ class BrowseItemsComponent {
                 this._mailbox.get(item.id, item.read).pipe(first(), map(m => Object.assign(item, m)), finalize(() => {
                     item.loading = false;
                     this._loading$.next(false);
-                }), shareReplay());
+                }), shareReplay$1());
         }
     }
     _sharedActions() {
@@ -9578,14 +9638,14 @@ class BrowsePaneComponent {
         this._destroy.complete();
     }
 }
-BrowsePaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BrowsePaneComponent, deps: [{ token: PaneRef }, { token: SessionService }, { token: Popup }, { token: PanesRouter }, { token: i3$3.Directionality }, { token: TranslateService }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+BrowsePaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BrowsePaneComponent, deps: [{ token: PaneRef }, { token: SessionService }, { token: Popup }, { token: PanesRouter }, { token: i1$5.Directionality }, { token: TranslateService }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
 BrowsePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: BrowsePaneComponent, selector: "bizdoc-browse.pane", host: { listeners: { "document:keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "search", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\" >\r\n  <ng-container *ngIf=\"!items.selection.isEmpty(); else search\">\r\n    <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n    <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n    <button mat-button color=\"primary\" fxShow [fxShow.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n    <button mat-icon-button color=\"primary\" fxHide [fxHide.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n      {{'SendSelected'| translate : items.selection.selected.length }}\r\n    </button>\r\n    <mat-menu #action>\r\n      <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n        <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n        </mat-divider>\r\n        <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n          {{ a.title }}\r\n        </button>\r\n      </ng-container>\r\n    </mat-menu>\r\n    <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  </ng-container>\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\r\n<ng-template #search>\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n          [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'Search' | translate}}\"\r\n         class=\"search-box\"\r\n         #searchInput\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  <mat-icon *ngIf=\"contains.value\" (click)=\"clearSearch()\">close</mat-icon>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</ng-template>\r\n", styles: [":host{min-width:540px;display:contents!important}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.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: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "view"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [searchAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BrowsePaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-browse.pane', animations: [searchAnimation], host: {
                         class: 'pane'
                     }, template: "<mat-toolbar class=\"nav-toolbar\" >\r\n  <ng-container *ngIf=\"!items.selection.isEmpty(); else search\">\r\n    <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n    <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n    <button mat-button color=\"primary\" fxShow [fxShow.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n    <button mat-icon-button color=\"primary\" fxHide [fxHide.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n      {{'SendSelected'| translate : items.selection.selected.length }}\r\n    </button>\r\n    <mat-menu #action>\r\n      <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n        <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n        </mat-divider>\r\n        <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n          {{ a.title }}\r\n        </button>\r\n      </ng-container>\r\n    </mat-menu>\r\n    <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  </ng-container>\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\r\n<ng-template #search>\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n          [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'Search' | translate}}\"\r\n         class=\"search-box\"\r\n         #searchInput\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  <mat-icon *ngIf=\"contains.value\" (click)=\"clearSearch()\">close</mat-icon>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</ng-template>\r\n", styles: [":host{min-width:540px;display:contents!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: PaneRef }, { type: SessionService }, { type: Popup }, { type: PanesRouter }, { type: i3$3.Directionality }, { type: TranslateService }, { type: i2$3.MatDialog }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: PaneRef }, { type: SessionService }, { type: Popup }, { type: PanesRouter }, { type: i1$5.Directionality }, { type: TranslateService }, { type: i2$3.MatDialog }]; }, propDecorators: { items: [{
                 type: ViewChild,
                 args: [BrowseItemsComponent, { static: true }]
             }], search: [{
@@ -11821,7 +11881,7 @@ class TaggingDirective {
         this._element.nativeElement.selectionStart = position + key.length - (val ? val.length - 1 : 0);
     }
 }
-TaggingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TaggingDirective, deps: [{ token: i4$2.MatInput, self: true }, { token: i3$3.Directionality }, { token: i0.ElementRef }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+TaggingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TaggingDirective, deps: [{ token: i4$2.MatInput, self: true }, { token: i1$5.Directionality }, { token: i0.ElementRef }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
 TaggingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: TaggingDirective, selector: "[bizdocTagging]", inputs: { resource: ["bizdocTagging", "resource"] }, outputs: { resourceChange: "bizdocTaggingChange" }, host: { listeners: { "keydown": "_handleKeydown($event)", "input": "_handleInput($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TaggingDirective, decorators: [{
             type: Directive,
@@ -11834,7 +11894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i4$2.MatInput, decorators: [{
                     type: Self
-                }] }, { type: i3$3.Directionality }, { type: i0.ElementRef }, { type: i1$2.Overlay }]; }, propDecorators: { resource: [{
+                }] }, { type: i1$5.Directionality }, { type: i0.ElementRef }, { type: i1$2.Overlay }]; }, propDecorators: { resource: [{
                 type: Input,
                 args: ['bizdocTagging']
             }], resourceChange: [{
@@ -12323,7 +12383,7 @@ class CommentComponent {
     }
 }
 CommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CommentComponent, deps: [{ token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: ChatInfo }, { token: AccountService }, { token: Popup }, { token: i1$2.Overlay }, { token: MailboxService }, { token: i0.ViewContainerRef }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-CommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CommentComponent, selector: "bizdoc-comment", inputs: { model: "model", item: "item" }, outputs: { deleted: "deleted", reply: "reply" }, host: { classAttribute: "comment" }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\r\n    <img *ngIf=\"item.image\" [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n  </div>\r\n  <button mat-icon-button *ngIf=\"me\" [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small fxFlex bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      <ng-container *ngIf=\"item.edited\">\r\n        &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!me\">\r\n        &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"comment-actions\" *ngIf=\"voting\">\r\n    <a *ngIf=\"item.votes > 0 || item.votes < 0\" [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    <button mat-icon-button (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\" ><mat-icon>thumb_up_alt</mat-icon></button>\r\n    <button mat-icon-button (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\" ><mat-icon>thumb_down_alt</mat-icon></button>\r\n  </div>\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] });
+CommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CommentComponent, selector: "bizdoc-comment", inputs: { model: "model", item: "item" }, outputs: { deleted: "deleted", reply: "reply" }, host: { classAttribute: "comment" }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\r\n    <img *ngIf=\"item.image\" [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n  </div>\r\n  <button mat-icon-button *ngIf=\"me\" [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small fxFlex bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      <ng-container *ngIf=\"item.edited\">\r\n        &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!me\">\r\n        &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"comment-actions\" *ngIf=\"voting\">\r\n    <a *ngIf=\"item.votes > 0 || item.votes < 0\" [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    <button mat-icon-button (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\" ><mat-icon>thumb_up_alt</mat-icon></button>\r\n    <button mat-icon-button (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\" ><mat-icon>thumb_down_alt</mat-icon></button>\r\n  </div>\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1$5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-comment', host: {
@@ -13123,7 +13183,7 @@ class ReportArgumentsComponent {
         form.patchValue(this.args, { emitEvent: false });
         form.valueChanges.pipe(debounceTime(ARGUMENTS_DEBOUNCE), takeUntil(this._destroy)).subscribe(c => {
             if (form.valid) {
-                cleanup$1(c);
+                cleanup(c);
                 this.args = c;
                 this.argsChange.emit(c);
             }
@@ -13339,7 +13399,7 @@ class WorkflowNodeComponent {
                         connector.addInfo = this.connector.getRawValue();
                     else
                         Object.assign(connector.addInfo, this.connector.getRawValue());
-                    cleanup$1(connector.addInfo);
+                    cleanup(connector.addInfo);
                     if (connector.annotations.length) {
                         connector.annotations[0].content = content;
                         this.diagram.dataBind();
@@ -13381,7 +13441,7 @@ class WorkflowNodeComponent {
                                     }]);
                         }
                         Object.assign(addInfo, m);
-                        cleanup$1(addInfo);
+                        cleanup(addInfo);
                         this.change.emit();
                     }
                     if (tool.template) {
@@ -13438,58 +13498,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: ['connectorargs', { static: true }]
             }] } });
 
-class SystemService {
-    constructor(_http) {
-        this._http = _http;
-    }
-    synchrinize(name) {
-        return this._http.post(`/api/system/cube/${name}/synchronize`, {});
-    }
-    findAll(options) {
-        const params = {};
-        if (isString(options))
-            params['search'] = options;
-        else {
-            if (options.search)
-                params['search'] = options.search;
-            if (options.formId)
-                params['formId'] = options.formId;
-            if (options.start)
-                params['start'] = new Date(options.start).toISOString();
-            if (options.end)
-                params['end'] = new Date(options.end).toISOString();
-        }
-        return this._http.get('/api/system/form/findAll', {
-            params
-        });
-    }
-    roles() {
-        return SystemService._cache['roles'] || (SystemService._cache['roles'] =
-            this._http.get('/api/system/positions/roles').pipe(shareReplay$1()));
-    }
-    range(formId) {
-        return this._http.get('/api/system/form/range', {
-            params: { formId: formId || null }
-        }).pipe(tap$1(r => r.forEach(p => p.date = new Date(p.date))));
-    }
-    cube(name) {
-        return this._http.get(`/api/system/cube/${name}`);
-    }
-    form(name) {
-        return this._http.get(`/api/system/form/${name}`);
-    }
-    save(form) {
-        const { workflow } = form;
-        return this._http.put(`/api/system/form/${form.name}`, { workflow });
-    }
-}
-SystemService._cache = {};
-SystemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SystemService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-SystemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SystemService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SystemService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-
 Diagram.Inject(UndoRedo, ConnectorBridging, ConnectorEditing, Snapping);
 SymbolPalette.Inject(BpmnDiagrams);
 const ports = [
@@ -14038,7 +14046,7 @@ class WorkflowComponent {
     }
 }
 WorkflowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: WorkflowComponent, deps: [{ token: PromptService }, { token: SystemService }, { token: PaneRef }, { token: PanesRouter }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPaletteEl"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagramEl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n    <!--<ng-container *ngIf=\"connectors.length\">\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n      </ng-container>\r\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    </ng-container>-->\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\r\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item *ngFor=\"let size of fontSizes\" (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .mat-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i10$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+WorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPaletteEl"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagramEl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n    <!--<ng-container *ngIf=\"connectors.length\">\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      <ng-container *ngIf=\"nodes[0].annotations.length\">\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n      </ng-container>\r\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    </ng-container>-->\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\r\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item *ngFor=\"let size of fontSizes\" (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .mat-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i10$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: WorkflowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-workflow', host: {
@@ -18162,11 +18170,11 @@ class OptionsService {
         oRef.backdropClick().subscribe(() => oRef.dispose());
     }
 }
-OptionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: OptionsService, deps: [{ token: i3$3.Directionality }, { token: i1$2.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+OptionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: OptionsService, deps: [{ token: i1$5.Directionality }, { token: i1$2.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 OptionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: OptionsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: OptionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i3$3.Directionality }, { type: i1$2.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.Directionality }, { type: i1$2.Overlay }, { type: i0.Injector }]; } });
 
 /** options component*/
 class QuickOptionsComponent {
@@ -18481,10 +18489,10 @@ class AdminMenuComponent {
     }
 }
 AdminMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AdminMenuComponent, deps: [{ token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-AdminMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: { collapsed: "collapsed" }, ngImport: i0, template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-display-1\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Workflow'|translate}}</h3>\r\n  <mat-list-item *ngFor=\"let f of profile.forms\" [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon}}</mat-icon>\r\n    <span matLine>{{f.title}}</span>\r\n  </mat-list-item>\r\n  <mat-divider></mat-divider>\r\n\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Utilities'|translate}}</h3>\r\n\r\n  <mat-list-item *ngFor=\"let u of profile.utilities\" [slotRouterLink]='[\"admin/utilities\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matLine>{{u.title}}</span>\r\n  </mat-list-item>\r\n</mat-nav-list>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i4$5.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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" }] });
+AdminMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: { collapsed: "collapsed" }, ngImport: i0, template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-display-1\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Workflow'|translate}}</h3>\r\n  <mat-list-item *ngFor=\"let f of profile.forms\" [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon|| 'description'}}</mat-icon>\r\n    <span matLine>{{f.title}}</span>\r\n  </mat-list-item>\r\n  <mat-divider></mat-divider>\r\n\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Utilities'|translate}}</h3>\r\n\r\n  <mat-list-item *ngFor=\"let u of profile.utilities\" [slotRouterLink]='[\"admin/utilities\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matLine>{{u.title}}</span>\r\n  </mat-list-item>\r\n</mat-nav-list>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i4$5.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: "14.0.3", ngImport: i0, type: AdminMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-admin-menu', template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-display-1\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Workflow'|translate}}</h3>\r\n  <mat-list-item *ngFor=\"let f of profile.forms\" [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon}}</mat-icon>\r\n    <span matLine>{{f.title}}</span>\r\n  </mat-list-item>\r\n  <mat-divider></mat-divider>\r\n\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Utilities'|translate}}</h3>\r\n\r\n  <mat-list-item *ngFor=\"let u of profile.utilities\" [slotRouterLink]='[\"admin/utilities\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matLine>{{u.title}}</span>\r\n  </mat-list-item>\r\n</mat-nav-list>\r\n" }]
+            args: [{ selector: 'bizdoc-admin-menu', template: "<!--<span class=\"mat-subheader\">BizDoc</span>\r\n<h1 class=\"mat-display-1\">{{'System'|translate}}</h1>-->\r\n\r\n<mat-nav-list>\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Workflow'|translate}}</h3>\r\n  <mat-list-item *ngFor=\"let f of profile.forms\" [slotRouterLink]='[\"admin/forms\", f.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"f.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{f.icon|| 'description'}}</mat-icon>\r\n    <span matLine>{{f.title}}</span>\r\n  </mat-list-item>\r\n  <mat-divider></mat-divider>\r\n\r\n  <h3 matSubheader *ngIf=\"!collapsed\">{{'Utilities'|translate}}</h3>\r\n\r\n  <mat-list-item *ngFor=\"let u of profile.utilities\" [slotRouterLink]='[\"admin/utilities\", u.name]' slotRouterLinkActive=\"active\">\r\n    <mat-icon matListIcon [bizdocTooltip]=\"u.title\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">{{u.icon || 'build'}}</mat-icon>\r\n    <span matLine>{{u.title}}</span>\r\n  </mat-list-item>\r\n</mat-nav-list>\r\n" }]
         }], ctorParameters: function () { return [{ type: SessionService }]; }, propDecorators: { collapsed: [{
                 type: Input
             }] } });
@@ -20323,12 +20331,12 @@ class HomeMobileComponent extends HomeBase {
         this.secondaryDrawer.toggle().then(this.resize);
     }
 }
-HomeMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: HomeMobileComponent, deps: [{ token: i0.Injector }, { token: i1$3.Router }, { token: i2$5.MatBottomSheet }, { token: i3$3.Directionality }, { token: SessionService }, { token: Popup }, { token: HubService }, { token: TranslateService }, { token: i8$1.MatSnackBar }, { token: ChatInfo }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+HomeMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: HomeMobileComponent, deps: [{ token: i0.Injector }, { token: i1$3.Router }, { token: i2$5.MatBottomSheet }, { token: i1$5.Directionality }, { token: SessionService }, { token: Popup }, { token: HubService }, { token: TranslateService }, { token: i8$1.MatSnackBar }, { token: ChatInfo }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
 HomeMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: HomeMobileComponent, selector: "bizdoc-mobile-home", viewQueries: [{ propertyName: "menuDrawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "secondaryDrawer", first: true, predicate: ["secondaryDrawer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\" [class.loading]=\"loading\">\r\n  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]=\"'Menu' | translate\" [attr.aria-label]=\"'Menu' | translate\"><mat-icon>menu</mat-icon></button>\r\n  <div [routerLink]='[\"/dashboard\"]' matRipple [matRippleUnbounded]=\"true\" [matRippleRadius]=\"100\" [matRippleCentered]=\"true\" style=\"outline: none\">\r\n    <img id=\"logo\" src=\"logo.svg\" alt=\"\" />\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"notifs()\" data-help=\"notifications\" [attr.aria-label]=\"'Notifications' | translate\" [bizdocTooltip]=\"'Notifications' | translate\"><mat-icon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\" matBadgeColor=\"accent\">notifications</mat-icon></button>\r\n  <button mat-icon-button *ngIf='chatEnabled' (click)=\"chat()\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\" [bizdocTooltip]=\"'Chat' | translate\"><mat-icon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\">chat</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container autosize>\r\n  <mat-sidenav #menuDrawer data-help=\"menu\" mode=\"over\" closed class=\"mat-elevation-z5\">\r\n    <mat-nav-list>\r\n      <mat-list-item [routerLink]='[\"/dashboard\"]' [attr.aria-label]=\"'Dashboard' | translate\" routerLinkActive=\"active\" data-help=\"dashboard\">\r\n        <mat-icon matListIcon>apps</mat-icon><span>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-expansion-panel class=\"mat-elevation-z0\" [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>inbox</mat-icon>\r\n            <span>{{'Mailbox' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let f of profile.folders\" [routerLink]='[\"/mailbox/f\", f.name]' routerLinkActive=\"active\" [attr.data-help]=\"'folder-'+f.name\" [attr.aria-label]=\"f.title\">\r\n          <mat-icon matListIcon>{{f.icon}}</mat-icon><span>{{f.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-list-item [routerLink]='[\"/schedule\"]' routerLinkActive=\"active\" *ngIf=\"schedulerEnabled\" [attr.aria-label]=\"'Scheduler' | translate\">\r\n        <mat-icon matListIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span>{{ 'Schedule' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <ng-container *ngIf=\"enableAnalysis\">\r\n      <ng-container *ngFor=\"let c of profile.cubes\">\r\n        <mat-expansion-panel class=\"mat-elevation-z0\" *ngIf=\"c.views.length\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              <mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>\r\n              <span>{{c.title}}</span>\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <mat-list-item *ngFor=\"let v of c.views\" [routerLink]='[\"/cube\", c.name, \"v\", v.name]' routerLinkActive=\"active\" [attr.data-help]=\"'cube-view-'+v.name\">\r\n            <mat-icon matListIcon>{{v.icon || 'insights'}}</mat-icon><span>{{v.title}}</span>\r\n          </mat-list-item>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n      </ng-container>\r\n      <mat-expansion-panel *ngIf=\"profile.reports.length\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>list_alt</mat-icon>\r\n            <span>{{'Reports' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let r of profile.reports\" [routerLink]='[\"/reports\", r.name]' routerLinkActive=\"active\"\r\n                       [attr.aria-label]=\"r.title\" [attr.data-help]=\"'report-'+r.name\">\r\n          <mat-icon matListIcon>{{r.icon}}</mat-icon><span>{{r.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" data-help=\"options\"\r\n                     (click)=\"options($event)\">\r\n        <mat-icon matListIcon>settingson</mat-icon>\r\n        <span>{{'Settings' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" (click)=\"signout($event)\">\r\n        <mat-icon matListIcon>logout</mat-icon>\r\n        <span>{{'Power' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n  <mat-sidenav #secondaryDrawer position=\"end\" closed mode=\"over\" autoFocus=\"false\" class=\"mat-elevation-z3\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n    <bizdoc-chat [(contact)]=\"contact\" *ngSwitchCase=\"'chat'\"></bizdoc-chat>\r\n    <bizdoc-notifications-table *ngSwitchCase=\"'notifications'\"></bizdoc-notifications-table>\r\n    </ng-container>\r\n  </mat-sidenav>\r\n  <mat-sidenav-content data-help=\"main\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n<button mat-fab [attr.aria-label]=\"'Compose'| translate\" [@fabFull]=\"composeState\" *ngIf=\"composeEnabled\" color=\"accent\" (click)=\"compose()\" data-help=\"compose\"><mat-icon>add</mat-icon></button>\r\n", styles: ["#logo{padding-left:12px;padding-right:12px;vertical-align:middle;width:120px;filter:invert(1)}:host ::ng-deep .mat-sidenav-container{height:calc(100% - 58px)}:host ::ng-deep .mat-sidenav-container .home-content{padding:unset}::ng-deep .mat-drawer-inner-container{height:auto}router-outlet~*{position:absolute;height:100%;width:100%}::ng-deep [dir=rtl] .mat-fab{left:30px;right:unset}.mat-fab{z-index:1;position:absolute;bottom:30px;right:30px}:host ::ng-deep .mat-expansion-panel-header{padding:0 18px}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-panel-header-title .mat-icon{padding:0 3px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i9$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i9$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i9$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i7$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i7$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NotificationsTableComponent, selector: "bizdoc-notifications-table" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: ChatComponent, selector: "bizdoc-chat", inputs: ["contact"], outputs: ["contactChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [fabAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: HomeMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-mobile-home', animations: [fabAnimation], template: "<mat-toolbar color=\"primary\" [class.loading]=\"loading\">\r\n  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]=\"'Menu' | translate\" [attr.aria-label]=\"'Menu' | translate\"><mat-icon>menu</mat-icon></button>\r\n  <div [routerLink]='[\"/dashboard\"]' matRipple [matRippleUnbounded]=\"true\" [matRippleRadius]=\"100\" [matRippleCentered]=\"true\" style=\"outline: none\">\r\n    <img id=\"logo\" src=\"logo.svg\" alt=\"\" />\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"notifs()\" data-help=\"notifications\" [attr.aria-label]=\"'Notifications' | translate\" [bizdocTooltip]=\"'Notifications' | translate\"><mat-icon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\" matBadgeColor=\"accent\">notifications</mat-icon></button>\r\n  <button mat-icon-button *ngIf='chatEnabled' (click)=\"chat()\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\" [bizdocTooltip]=\"'Chat' | translate\"><mat-icon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\">chat</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container autosize>\r\n  <mat-sidenav #menuDrawer data-help=\"menu\" mode=\"over\" closed class=\"mat-elevation-z5\">\r\n    <mat-nav-list>\r\n      <mat-list-item [routerLink]='[\"/dashboard\"]' [attr.aria-label]=\"'Dashboard' | translate\" routerLinkActive=\"active\" data-help=\"dashboard\">\r\n        <mat-icon matListIcon>apps</mat-icon><span>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-expansion-panel class=\"mat-elevation-z0\" [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>inbox</mat-icon>\r\n            <span>{{'Mailbox' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let f of profile.folders\" [routerLink]='[\"/mailbox/f\", f.name]' routerLinkActive=\"active\" [attr.data-help]=\"'folder-'+f.name\" [attr.aria-label]=\"f.title\">\r\n          <mat-icon matListIcon>{{f.icon}}</mat-icon><span>{{f.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-list-item [routerLink]='[\"/schedule\"]' routerLinkActive=\"active\" *ngIf=\"schedulerEnabled\" [attr.aria-label]=\"'Scheduler' | translate\">\r\n        <mat-icon matListIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span>{{ 'Schedule' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <ng-container *ngIf=\"enableAnalysis\">\r\n      <ng-container *ngFor=\"let c of profile.cubes\">\r\n        <mat-expansion-panel class=\"mat-elevation-z0\" *ngIf=\"c.views.length\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              <mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>\r\n              <span>{{c.title}}</span>\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <mat-list-item *ngFor=\"let v of c.views\" [routerLink]='[\"/cube\", c.name, \"v\", v.name]' routerLinkActive=\"active\" [attr.data-help]=\"'cube-view-'+v.name\">\r\n            <mat-icon matListIcon>{{v.icon || 'insights'}}</mat-icon><span>{{v.title}}</span>\r\n          </mat-list-item>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n      </ng-container>\r\n      <mat-expansion-panel *ngIf=\"profile.reports.length\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>list_alt</mat-icon>\r\n            <span>{{'Reports' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let r of profile.reports\" [routerLink]='[\"/reports\", r.name]' routerLinkActive=\"active\"\r\n                       [attr.aria-label]=\"r.title\" [attr.data-help]=\"'report-'+r.name\">\r\n          <mat-icon matListIcon>{{r.icon}}</mat-icon><span>{{r.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" data-help=\"options\"\r\n                     (click)=\"options($event)\">\r\n        <mat-icon matListIcon>settingson</mat-icon>\r\n        <span>{{'Settings' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" (click)=\"signout($event)\">\r\n        <mat-icon matListIcon>logout</mat-icon>\r\n        <span>{{'Power' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n  <mat-sidenav #secondaryDrawer position=\"end\" closed mode=\"over\" autoFocus=\"false\" class=\"mat-elevation-z3\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n    <bizdoc-chat [(contact)]=\"contact\" *ngSwitchCase=\"'chat'\"></bizdoc-chat>\r\n    <bizdoc-notifications-table *ngSwitchCase=\"'notifications'\"></bizdoc-notifications-table>\r\n    </ng-container>\r\n  </mat-sidenav>\r\n  <mat-sidenav-content data-help=\"main\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n<button mat-fab [attr.aria-label]=\"'Compose'| translate\" [@fabFull]=\"composeState\" *ngIf=\"composeEnabled\" color=\"accent\" (click)=\"compose()\" data-help=\"compose\"><mat-icon>add</mat-icon></button>\r\n", styles: ["#logo{padding-left:12px;padding-right:12px;vertical-align:middle;width:120px;filter:invert(1)}:host ::ng-deep .mat-sidenav-container{height:calc(100% - 58px)}:host ::ng-deep .mat-sidenav-container .home-content{padding:unset}::ng-deep .mat-drawer-inner-container{height:auto}router-outlet~*{position:absolute;height:100%;width:100%}::ng-deep [dir=rtl] .mat-fab{left:30px;right:unset}.mat-fab{z-index:1;position:absolute;bottom:30px;right:30px}:host ::ng-deep .mat-expansion-panel-header{padding:0 18px}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-panel-header-title .mat-icon{padding:0 3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$3.Router }, { type: i2$5.MatBottomSheet }, { type: i3$3.Directionality }, { type: SessionService }, { type: Popup }, { type: HubService }, { type: TranslateService }, { type: i8$1.MatSnackBar }, { type: ChatInfo }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$3.Router }, { type: i2$5.MatBottomSheet }, { type: i1$5.Directionality }, { type: SessionService }, { type: Popup }, { type: HubService }, { type: TranslateService }, { type: i8$1.MatSnackBar }, { type: ChatInfo }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
                 }] }]; }, propDecorators: { menuDrawer: [{
@@ -20689,12 +20697,12 @@ class BrowseComponent {
         this._destroy.complete();
     }
 }
-BrowseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BrowseComponent, deps: [{ token: i1$3.Router }, { token: WindowTitleService }, { token: SessionService }, { token: i1$3.ActivatedRoute }, { token: i3$3.Directionality }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+BrowseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BrowseComponent, deps: [{ token: i1$3.Router }, { token: WindowTitleService }, { token: SessionService }, { token: i1$3.ActivatedRoute }, { token: i1$5.Directionality }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
 BrowseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: BrowseComponent, selector: "ng-component", viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "drawer", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n  <button mat-button color=\"primary\" fxShow [fxShow.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n  <button mat-icon-button color=\"primary\" fxHide [fxHide.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n  <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n  <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n    {{'SendSelected'| translate : items.selection.selected.length }}\r\n  </button>\r\n  <mat-menu #action>\r\n    <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n      <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n      </mat-divider>\r\n      <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n        {{ a.title }}\r\n      </button>\r\n    </ng-container>\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button fxHide.xs (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button fxHide.xs (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n  <button mat-icon-button (click)=\"drawer.toggle()\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\" autosize>\r\n  <mat-sidenav #drawer mode=\"over\" position=\"end\" [opened]=\"false\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n    <bizdoc-browse-filter *ngSwitchDefault [values]=filters (valuesChange)=\"filterChange($event)\" [folderId]=\"folderId\"></bizdoc-browse-filter>\r\n    </ng-container>\r\n  </mat-sidenav>\r\n  <mat-sidenav-content>\r\n    <bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\" (open)=\"open($event)\" (view)=view($event) #items></bizdoc-browse-items>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i10$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i7$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i7$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: BrowseFilterComponent, selector: "bizdoc-browse-filter", inputs: ["values", "folderId", "exclude"], outputs: ["valuesChange"] }, { kind: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "view"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BrowseComponent, decorators: [{
             type: Component,
             args: [{ template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n  <button mat-button color=\"primary\" fxShow [fxShow.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n  <button mat-icon-button color=\"primary\" fxHide [fxHide.xs]=\"false\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n  <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n  <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n    {{'SendSelected'| translate : items.selection.selected.length }}\r\n  </button>\r\n  <mat-menu #action>\r\n    <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n      <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n      </mat-divider>\r\n      <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n        {{ a.title }}\r\n      </button>\r\n    </ng-container>\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button fxHide.xs (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button fxHide.xs (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n  <button mat-icon-button (click)=\"drawer.toggle()\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\" autosize>\r\n  <mat-sidenav #drawer mode=\"over\" position=\"end\" [opened]=\"false\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n    <bizdoc-browse-filter *ngSwitchDefault [values]=filters (valuesChange)=\"filterChange($event)\" [folderId]=\"folderId\"></bizdoc-browse-filter>\r\n    </ng-container>\r\n  </mat-sidenav>\r\n  <mat-sidenav-content>\r\n    <bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\" (open)=\"open($event)\" (view)=view($event) #items></bizdoc-browse-items>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: WindowTitleService }, { type: SessionService }, { type: i1$3.ActivatedRoute }, { type: i3$3.Directionality }, { type: i2$3.MatDialog }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: WindowTitleService }, { type: SessionService }, { type: i1$3.ActivatedRoute }, { type: i1$5.Directionality }, { type: i2$3.MatDialog }]; }, propDecorators: { items: [{
                 type: ViewChild,
                 args: [BrowseItemsComponent, { static: true }]
             }], drawer: [{
@@ -23112,7 +23120,7 @@ let PeersPerformanceWidget = PeersPerformanceWidget_1 = class PeersPerformanceWi
     }
 };
 PeersPerformanceWidget.nextId = 0;
-PeersPerformanceWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PeersPerformanceWidget, deps: [{ token: SessionService }, { token: WidgetRef }, { token: i0.ElementRef }, { token: AccountService }, { token: i3$3.Directionality }, { token: DurationFormatPipe }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PeersPerformanceWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PeersPerformanceWidget, deps: [{ token: SessionService }, { token: WidgetRef }, { token: i0.ElementRef }, { token: AccountService }, { token: i1$5.Directionality }, { token: DurationFormatPipe }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
 PeersPerformanceWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PeersPerformanceWidget, selector: "ng-component", host: { attributes: { "dir": "ltr" }, properties: { "id": "this.id" }, styleAttribute: "display: block" }, viewQueries: [{ propertyName: "gauge", first: true, predicate: CircularGaugeComponent, descendants: true }], ngImport: i0, template: '', isInline: true });
 PeersPerformanceWidget = PeersPerformanceWidget_1 = __decorate([
     BizDoc({
@@ -23129,7 +23137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         dir: 'ltr'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: WidgetRef }, { type: i0.ElementRef }, { type: AccountService }, { type: i3$3.Directionality }, { type: DurationFormatPipe }, { type: TranslateService }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: SessionService }, { type: WidgetRef }, { type: i0.ElementRef }, { type: AccountService }, { type: i1$5.Directionality }, { type: DurationFormatPipe }, { type: TranslateService }]; }, propDecorators: { id: [{
                 type: HostBinding
             }], gauge: [{
                 type: ViewChild,
@@ -23154,7 +23162,7 @@ let PendingResultsWidget = class PendingResultsWidget {
     }
 };
 PendingResultsWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PendingResultsWidget, deps: [{ token: WidgetRef }], target: i0.ɵɵFactoryTarget.Component });
-PendingResultsWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PendingResultsWidget, selector: "bizdoc-pending-results", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span *ngIf=\"element.standard\" [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n    white-space: nowrap;\r\n  }\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "\n  .range {\n    white-space: nowrap;\n  }\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: DurationFormatPipe, name: "amDurationFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+PendingResultsWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PendingResultsWidget, selector: "bizdoc-pending-results", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span *ngIf=\"element.standard\" [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n    white-space: nowrap;\r\n  }\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "\n  .range {\n    white-space: nowrap;\n  }\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: DurationFormatPipe, name: "amDurationFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
         listAnimation,
         itemAnimation
     ] });
@@ -23363,7 +23371,7 @@ let PersonalScoreWidget = class PersonalScoreWidget {
         this._destroy.complete();
     }
 };
-PersonalScoreWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PersonalScoreWidget, deps: [{ token: WidgetRef }, { token: SessionService }, { token: i3$3.Directionality }, { token: DurationFormatPipe }, { token: i0.ElementRef }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PersonalScoreWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PersonalScoreWidget, deps: [{ token: WidgetRef }, { token: SessionService }, { token: i1$5.Directionality }, { token: DurationFormatPipe }, { token: i0.ElementRef }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
 PersonalScoreWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PersonalScoreWidget, selector: "ng-component", host: { attributes: { "dir": "ltr" }, styleAttribute: "display: block" }, viewQueries: [{ propertyName: "gauge", first: true, predicate: CircularGaugeComponent, descendants: true }], ngImport: i0, template: '', isInline: true });
 PersonalScoreWidget = __decorate([
     BizDoc({
@@ -23381,7 +23389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         dir: 'ltr'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: WidgetRef }, { type: SessionService }, { type: i3$3.Directionality }, { type: DurationFormatPipe }, { type: i0.ElementRef }, { type: TranslateService }]; }, propDecorators: { gauge: [{
+        }], ctorParameters: function () { return [{ type: WidgetRef }, { type: SessionService }, { type: i1$5.Directionality }, { type: DurationFormatPipe }, { type: i0.ElementRef }, { type: TranslateService }]; }, propDecorators: { gauge: [{
                 type: ViewChild,
                 args: [CircularGaugeComponent]
             }] } });
@@ -23588,11 +23596,11 @@ class UsageReportBase {
     }
 }
 UsageReportBase.nextId = 0;
-UsageReportBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageReportBase, deps: [{ token: ReportRef }, { token: DatasourceService }, { token: CubeService }, { token: SessionService }, { token: RouterImpl }, { token: PromptService }, { token: i3$3.Directionality }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+UsageReportBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageReportBase, deps: [{ token: ReportRef }, { token: DatasourceService }, { token: CubeService }, { token: SessionService }, { token: RouterImpl }, { token: PromptService }, { token: i1$5.Directionality }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
 UsageReportBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: UsageReportBase, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageReportBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: ReportRef }, { type: DatasourceService }, { type: CubeService }, { type: SessionService }, { type: RouterImpl }, { type: PromptService }, { type: i3$3.Directionality }, { type: TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: ReportRef }, { type: DatasourceService }, { type: CubeService }, { type: SessionService }, { type: RouterImpl }, { type: PromptService }, { type: i1$5.Directionality }, { type: TranslateService }]; } });
 ;
 
 /**
@@ -23922,7 +23930,7 @@ class UsageChartComponent extends UsageReportBase {
         super.ngOnDestroy();
     }
 }
-UsageChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageChartComponent, deps: [{ token: ReportRef }, { token: DatasourceService }, { token: CubeService }, { token: SessionService }, { token: RouterImpl }, { token: PromptService }, { token: i0.ElementRef }, { token: i3$3.Directionality }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+UsageChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageChartComponent, deps: [{ token: ReportRef }, { token: DatasourceService }, { token: CubeService }, { token: SessionService }, { token: RouterImpl }, { token: PromptService }, { token: i0.ElementRef }, { token: i1$5.Directionality }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
 UsageChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UsageChartComponent, selector: "ng-component", host: { properties: { "id": "id", "dir": "dir" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageChartComponent, decorators: [{
             type: Component,
@@ -23933,7 +23941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         '[dir]': 'dir'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: ReportRef }, { type: DatasourceService }, { type: CubeService }, { type: SessionService }, { type: RouterImpl }, { type: PromptService }, { type: i0.ElementRef }, { type: i3$3.Directionality }, { type: TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: ReportRef }, { type: DatasourceService }, { type: CubeService }, { type: SessionService }, { type: RouterImpl }, { type: PromptService }, { type: i0.ElementRef }, { type: i1$5.Directionality }, { type: TranslateService }]; } });
 
 const PIVOT_HEADER_DELIMITER = '|';
 /**
@@ -24159,7 +24167,7 @@ class UsagePivotComponent extends UsageReportBase {
         super.ngOnDestroy();
     }
 }
-UsagePivotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsagePivotComponent, deps: [{ token: ReportRef }, { token: DatasourceService }, { token: i0.ElementRef }, { token: CubeService }, { token: SessionService }, { token: RouterImpl }, { token: PromptService }, { token: i3$3.Directionality }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+UsagePivotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsagePivotComponent, deps: [{ token: ReportRef }, { token: DatasourceService }, { token: i0.ElementRef }, { token: CubeService }, { token: SessionService }, { token: RouterImpl }, { token: PromptService }, { token: i1$5.Directionality }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
 UsagePivotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UsagePivotComponent, selector: "ng-component", host: { properties: { "id": "id" } }, viewQueries: [{ propertyName: "pivot", first: true, predicate: PivotViewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsagePivotComponent, decorators: [{
             type: Component,
@@ -24168,7 +24176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     //templateUrl: 'usage-pivot.component.html',
                     host: { '[id]': 'id' }
                 }]
-        }], ctorParameters: function () { return [{ type: ReportRef }, { type: DatasourceService }, { type: i0.ElementRef }, { type: CubeService }, { type: SessionService }, { type: RouterImpl }, { type: PromptService }, { type: i3$3.Directionality }, { type: TranslateService }]; }, propDecorators: { pivot: [{
+        }], ctorParameters: function () { return [{ type: ReportRef }, { type: DatasourceService }, { type: i0.ElementRef }, { type: CubeService }, { type: SessionService }, { type: RouterImpl }, { type: PromptService }, { type: i1$5.Directionality }, { type: TranslateService }]; }, propDecorators: { pivot: [{
                 type: ViewChild,
                 args: [PivotViewComponent]
             }] } });
@@ -24667,176 +24675,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 type: Input
             }] } });
 
-//[style.background-color]='value'
-class ColorPicker {
-    constructor(ngControl, _overlay, _vc, _element, _dir) {
-        this.ngControl = ngControl;
-        this._overlay = _overlay;
-        this._vc = _vc;
-        this._element = _element;
-        this._dir = _dir;
-        this._palettes = MATERIAL_PALETTES;
-        this.scales = ["50",
-            "100",
-            "200",
-            "300",
-            "400",
-            "500",
-            "600",
-            "700",
-            "800",
-            "900"];
-        this.colors = ["red",
-            "pink",
-            "purple",
-            "deepPurple",
-            "indigo",
-            "blue",
-            "lightBlue",
-            "cyan",
-            "teal",
-            "green",
-            "lightGreen",
-            "lime",
-            "yellow",
-            "amber",
-            "orange",
-            "brown",
-            "grey",
-            "blueGrey"];
-        this.Object = Object;
-        this._required = false;
-        this._disabled = false;
-        this.stateChanges = new Subject();
-        this.valueChanges = new Subject();
-        this.id = `color-picker-${ColorPicker.nextId++}`;
-        this.focused = false;
-        this.errorState = false;
-        this.describedBy = '';
-        this._destroy = new Subject();
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    writeValue(obj) {
-        this._value = obj;
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    get value() { return this._value; }
-    set value(val) {
-        this._value = val;
-        this._onChange && this._onChange(val);
-        this.valueChanges.next(val);
-        this.stateChanges.next();
-    }
-    get empty() {
-        return this._value === null;
-    }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-    get required() {
-        return this._required;
-    }
-    set required(req) {
-        this._required = req;
-        this.stateChanges.next();
-    }
-    get disabled() { return this._disabled; }
-    set disabled(value) {
-        this._disabled = value;
-        this.stateChanges.next();
-    }
-    setDescribedByIds(ids) {
-        this.describedBy = ids.join(' ');
-    }
-    onContainerClick(_event) {
-        this._onTouched && this._onTouched();
-        this.open();
-    }
-    ngOnDestroy() {
-        this._destroy.next();
-        this._destroy.complete();
-    }
-    open() {
-        if (!this._overlayRef)
-            this._overlayRef = this._createOverlay();
-        const portal = new TemplatePortal(this._colorPalette, this._vc);
-        this._overlayRef.attach(portal);
-    }
-    close() {
-        this._overlayRef.detach();
-    }
-    _pick(color) {
-        this.value = color;
-        this.close();
-    }
-    _createOverlay() {
-        const ref = this._overlay.create({
-            positionStrategy: this._overlay.position().flexibleConnectedTo(this._element).withPositions([{
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top'
-                }, {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom'
-                }]),
-            direction: this._dir.value,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop'
-        });
-        merge(ref.backdropClick(), ref.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).subscribe(() => this.close());
-        return ref;
-    }
-}
-ColorPicker.nextId = 0;
-ColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i3$3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
-ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ColorPicker, selector: "bizdoc-color-picker", inputs: { label: "label", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, decorators: [{
-            type: Component,
-            args: [{ selector: 'bizdoc-color-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], host: {
-                        '[class.floating]': 'shouldLabelFloat',
-                        '[id]': 'id',
-                        '[attr.aria-describedby]': 'describedBy'
-                    }, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i3$3.Directionality }]; }, propDecorators: { label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChanges: [{
-                type: Output
-            }], id: [{
-                type: HostBinding
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floating']
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], describedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
-            }], _colorPalette: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
 const COMBINATION_PICKER_BODY = new InjectionToken('combination_body');
 /** */
 class CombinationPickerBody {
@@ -25735,7 +25573,7 @@ class CombinationPicker {
     }
 }
 CombinationPicker.nextId = 0;
-CombinationPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CombinationPicker, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i4.MatFormField, optional: true }, { token: i1$2.Overlay }, { token: i2$3.MatDialog }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i2$2.FocusMonitor }, { token: i0.ElementRef }, { token: i3$3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+CombinationPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CombinationPicker, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i4.MatFormField, optional: true }, { token: i1$2.Overlay }, { token: i2$3.MatDialog }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i2$2.FocusMonitor }, { token: i0.ElementRef }, { token: i1$5.Directionality }], target: i0.ɵɵFactoryTarget.Component });
 CombinationPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CombinationPicker, selector: "bizdoc-combination-picker", inputs: { _divider: ["divider", "_divider"], _displayDivider: ["displayDivider", "_displayDivider"], limit: "limit", cube: "cube", exploreSettings: "exploreSettings", description: "description", touchUi: "touchUi", placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, outputs: { optionSelected: "optionSelected", descriptionChange: "descriptionChange" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy", "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CombinationPicker }], ngImport: i0, template: "<div class=\"account-picker-element\">\r\n  <textarea class=\"mat-input-element\" [disabled]=\"disabled\" (keydown)=\"_keyDown($event)\" [value]=\"description\"></textarea>\r\n  <div class=\"mat-form-field-suffix\">\r\n    <button mat-icon-button [disableRipple]=true (click)=\"open($event)\" matSuffix [disabled]=\"disabled\" tabindex=\"-1\" [class.mat-warn]=\"errorState\"><mat-icon>arrow_drop_down</mat-icon></button>\r\n  </div>\r\n</div>\r\n", styles: [".account-picker-element{display:flex;flex-direction:row}.account-picker-element textarea{resize:none;flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CombinationPicker, decorators: [{
             type: Component,
@@ -25749,7 +25587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     type: Self
                 }] }, { type: i4.MatFormField, decorators: [{
                     type: Optional
-                }] }, { type: i1$2.Overlay }, { type: i2$3.MatDialog }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i2$2.FocusMonitor }, { type: i0.ElementRef }, { type: i3$3.Directionality }]; }, propDecorators: { _divider: [{
+                }] }, { type: i1$2.Overlay }, { type: i2$3.MatDialog }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i2$2.FocusMonitor }, { type: i0.ElementRef }, { type: i1$5.Directionality }]; }, propDecorators: { _divider: [{
                 type: Input,
                 args: ['divider']
             }], _displayDivider: [{
@@ -27582,13 +27420,13 @@ let BoxFormComponent = class BoxFormComponent {
     }
 };
 BoxFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BoxFormComponent, deps: [{ token: i2$1.FormBuilder }, { token: FormRef }], target: i0.ɵɵFactoryTarget.Component });
-BoxFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: BoxFormComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <section *ngFor=\"let s of metadata.sections\" [formGroupName]=\"s.name\">\r\n    <div *ngFor=\"let r of s.rows\" fxLayout=\"row\">\r\n      <ng-container *ngFor=\"let f of r.fields\" [ngSwitch]=\"f.kind\">\r\n        <mat-form-field *ngSwitchCase=\"'Select'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <bizdoc-select [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Date'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput\r\n                 [formControlName]=\"f.name\"\r\n                 [required]=\"f.required\"\r\n                 [min]=\"f.min\"\r\n                 [max]=\"f.max\"\r\n                 [matDatepicker]=\"picker\" />\r\n          <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #picker></mat-datepicker>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Text'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <textarea matInput [formControl]=control cdkTextareaAutosize\r\n                    [formControlName]=\"f.name\"\r\n                    [required]=\"field.required\" [minlength]=\"field.min\" [maxlength]=\"field.max\"></textarea>\r\n        </mat-form-field>\r\n        <mat-checkbox [formControlName]=\"f.name\" *ngSwitchCase=\"'Checkbox'\">{{f.label}}</mat-checkbox>\r\n        <mat-slide-toggle [formControlName]=\"f.name\" *ngSwitchCase=\"'Switch'\">{{f.label}}</mat-slide-toggle>\r\n        <mat-form-field appearance=\"outline\" fxFlex *ngSwitchDefault>\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput [required]=\"f.required\" [formControlName]=\"f.name\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</form>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4$2.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: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }] });
+BoxFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: BoxFormComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <ng-container formGroupName=\"content\">    \r\n    <section *ngFor=\"let s of metadata.sections\" [formGroupName]=\"s.name\">\r\n      <h2 class=\"mat-title\">{{''}}</h2>\r\n      <ng-container [ngSwitch]=\"multiLine\"></ng-container>\r\n      <div *ngFor=\"let r of s.rows\" fxLayout=\"row\">\r\n        <ng-container *ngFor=\"let f of r.fields\" [ngSwitch]=\"f.kind\">\r\n          <mat-form-field *ngSwitchCase=\"'Select'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <bizdoc-select [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-select>\r\n          </mat-form-field>\r\n          <mat-form-field *ngSwitchCase=\"'Autocomplete'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <bizdoc-autocomplete [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-autocomplete>\r\n          </mat-form-field>\r\n          <mat-form-field *ngSwitchCase=\"'Date'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <input matInput\r\n                   [formControlName]=\"f.name\"\r\n                   [required]=\"f.required\"\r\n                   [min]=\"f.min\"\r\n                   [max]=\"f.max\"\r\n                   [matDatepicker]=\"picker\" />\r\n            <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #picker></mat-datepicker>\r\n          </mat-form-field>\r\n          <mat-form-field *ngSwitchCase=\"'Text'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <textarea matInput [formControl]=control cdkTextareaAutosize\r\n                      [formControlName]=\"f.name\"\r\n                      [required]=\"f.required\" [minlength]=\"f.min\" [maxlength]=\"f.max\"></textarea>\r\n          </mat-form-field>\r\n          <mat-checkbox [formControlName]=\"f.name\" *ngSwitchCase=\"'Checkbox'\">{{f.label}}</mat-checkbox>\r\n          <mat-slide-toggle [formControlName]=\"f.name\" *ngSwitchCase=\"'Switch'\">{{f.label}}</mat-slide-toggle>\r\n          <mat-form-field appearance=\"outline\" fxFlex *ngSwitchDefault>\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <input matInput [required]=\"f.required\" [formControlName]=\"f.name\" />\r\n          </mat-form-field>\r\n          &nbsp;\r\n        </ng-container>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</form>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4$2.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: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "component", type: TypeAutocomplete, selector: "bizdoc-autocomplete", inputs: ["type", "placeholder", "text", "required", "disabled", "value", "minimumChars", "textFormControlName", "textFormControl"], outputs: ["textChange", "optionSelected"] }] });
 BoxFormComponent = __decorate([
     BizDoc({ selector: 'bizdoc-box-form' })
 ], BoxFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BoxFormComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <section *ngFor=\"let s of metadata.sections\" [formGroupName]=\"s.name\">\r\n    <div *ngFor=\"let r of s.rows\" fxLayout=\"row\">\r\n      <ng-container *ngFor=\"let f of r.fields\" [ngSwitch]=\"f.kind\">\r\n        <mat-form-field *ngSwitchCase=\"'Select'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <bizdoc-select [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Date'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput\r\n                 [formControlName]=\"f.name\"\r\n                 [required]=\"f.required\"\r\n                 [min]=\"f.min\"\r\n                 [max]=\"f.max\"\r\n                 [matDatepicker]=\"picker\" />\r\n          <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #picker></mat-datepicker>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Text'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <textarea matInput [formControl]=control cdkTextareaAutosize\r\n                    [formControlName]=\"f.name\"\r\n                    [required]=\"field.required\" [minlength]=\"field.min\" [maxlength]=\"field.max\"></textarea>\r\n        </mat-form-field>\r\n        <mat-checkbox [formControlName]=\"f.name\" *ngSwitchCase=\"'Checkbox'\">{{f.label}}</mat-checkbox>\r\n        <mat-slide-toggle [formControlName]=\"f.name\" *ngSwitchCase=\"'Switch'\">{{f.label}}</mat-slide-toggle>\r\n        <mat-form-field appearance=\"outline\" fxFlex *ngSwitchDefault>\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput [required]=\"f.required\" [formControlName]=\"f.name\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</form>\r\n", styles: ["form{padding:8px}\n"] }]
+            args: [{ template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <ng-container formGroupName=\"content\">    \r\n    <section *ngFor=\"let s of metadata.sections\" [formGroupName]=\"s.name\">\r\n      <h2 class=\"mat-title\">{{''}}</h2>\r\n      <ng-container [ngSwitch]=\"multiLine\"></ng-container>\r\n      <div *ngFor=\"let r of s.rows\" fxLayout=\"row\">\r\n        <ng-container *ngFor=\"let f of r.fields\" [ngSwitch]=\"f.kind\">\r\n          <mat-form-field *ngSwitchCase=\"'Select'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <bizdoc-select [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-select>\r\n          </mat-form-field>\r\n          <mat-form-field *ngSwitchCase=\"'Autocomplete'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <bizdoc-autocomplete [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-autocomplete>\r\n          </mat-form-field>\r\n          <mat-form-field *ngSwitchCase=\"'Date'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <input matInput\r\n                   [formControlName]=\"f.name\"\r\n                   [required]=\"f.required\"\r\n                   [min]=\"f.min\"\r\n                   [max]=\"f.max\"\r\n                   [matDatepicker]=\"picker\" />\r\n            <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #picker></mat-datepicker>\r\n          </mat-form-field>\r\n          <mat-form-field *ngSwitchCase=\"'Text'\" appearance=\"outline\">\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <textarea matInput [formControl]=control cdkTextareaAutosize\r\n                      [formControlName]=\"f.name\"\r\n                      [required]=\"f.required\" [minlength]=\"f.min\" [maxlength]=\"f.max\"></textarea>\r\n          </mat-form-field>\r\n          <mat-checkbox [formControlName]=\"f.name\" *ngSwitchCase=\"'Checkbox'\">{{f.label}}</mat-checkbox>\r\n          <mat-slide-toggle [formControlName]=\"f.name\" *ngSwitchCase=\"'Switch'\">{{f.label}}</mat-slide-toggle>\r\n          <mat-form-field appearance=\"outline\" fxFlex *ngSwitchDefault>\r\n            <mat-label>{{f.label}}</mat-label>\r\n            <input matInput [required]=\"f.required\" [formControlName]=\"f.name\" />\r\n          </mat-form-field>\r\n          &nbsp;\r\n        </ng-container>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</form>\r\n", styles: ["form{padding:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: FormRef }]; } });
 
 /** configuration componenets */
@@ -27639,7 +27477,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker,
         QuickCommentComponent,
         DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
-        MatIconAnimate, DateRangePipe, AgoPipe, ColorPicker, StateDirective,
+        MatIconAnimate, DateRangePipe, AgoPipe, StateDirective,
         JoinPipe,
         TypeValuePipe,
         TranslatePipe, IdentityName, SanitizeHtmlPipe,
@@ -27807,7 +27645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker,
                         QuickCommentComponent,
                         DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
-                        MatIconAnimate, DateRangePipe, AgoPipe, ColorPicker, StateDirective,
+                        MatIconAnimate, DateRangePipe, AgoPipe, StateDirective,
                         JoinPipe,
                         TypeValuePipe,
                         TranslatePipe, IdentityName, SanitizeHtmlPipe,
@@ -28318,7 +28156,7 @@ let ManageCubeIndexUtility = class ManageCubeIndexUtility {
         this._destroy.next();
     }
 };
-ManageCubeIndexUtility.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ManageCubeIndexUtility, deps: [{ token: i3$3.Directionality }, { token: UtilityRef }, { token: SessionService }, { token: i0.ViewContainerRef }, { token: PromptService }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+ManageCubeIndexUtility.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ManageCubeIndexUtility, deps: [{ token: i1$5.Directionality }, { token: UtilityRef }, { token: SessionService }, { token: i0.ViewContainerRef }, { token: PromptService }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
 ManageCubeIndexUtility.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ManageCubeIndexUtility, selector: "ng-component", viewQueries: [{ propertyName: "editTmpl", first: true, predicate: ["editTmpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\"><mat-icon>add</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<table mat-table [dataSource]=\"dataSource\">\r\n  <ng-container *ngFor=\"let a of axes; let i = index\" [matColumnDef]=\"a.name\">\r\n    <th mat-header-cell *matHeaderCellDef>{{a.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.axes[names.indexOf(a.name)]| typeValue: a.dataType | async}} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"value\">\r\n    <th mat-header-cell *matHeaderCellDef>{{'Value'|translate}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.value | currency : CURRENCY_CODE }} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button><mat-icon>more_horiz</mat-icon></button>\r\n      <button mat-icon-button (click)=\"remove(element, $event)\"><mat-icon>delete</mat-icon></button>\r\n    </td>\r\n  </ng-container>\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns;\" (click)=\"edit(element)\"></tr>\r\n</table>\r\n<ng-template #editTmpl>\r\n  <form [formGroup]=\"form\">\r\n    <mat-form-field *ngFor=\"let a of axes\">\r\n      <bizdoc-select [placeholder]=\"a.title\" [type]=\"a.dataType\" [formControlName]=\"a.name\" required></bizdoc-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput type=\"number\" formControlName=\"value\" autocomplete=\"off\" required [placeholder]=\"'Value'|translate\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: ["form{padding:8px 4px 8px 8px;flex-flow:row wrap;box-sizing:border-box;display:flex}form>*{flex:1 1 auto;box-sizing:border-box;width:50%;padding:0 5px 0 0}table{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.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: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: TypeValuePipe, name: "typeValue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ManageCubeIndexUtility = __decorate([
     BizDoc({ selector: 'manage-cube-index' })
@@ -28326,7 +28164,7 @@ ManageCubeIndexUtility = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ManageCubeIndexUtility, decorators: [{
             type: Component,
             args: [{ template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\"><mat-icon>add</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<table mat-table [dataSource]=\"dataSource\">\r\n  <ng-container *ngFor=\"let a of axes; let i = index\" [matColumnDef]=\"a.name\">\r\n    <th mat-header-cell *matHeaderCellDef>{{a.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.axes[names.indexOf(a.name)]| typeValue: a.dataType | async}} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"value\">\r\n    <th mat-header-cell *matHeaderCellDef>{{'Value'|translate}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.value | currency : CURRENCY_CODE }} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button><mat-icon>more_horiz</mat-icon></button>\r\n      <button mat-icon-button (click)=\"remove(element, $event)\"><mat-icon>delete</mat-icon></button>\r\n    </td>\r\n  </ng-container>\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns;\" (click)=\"edit(element)\"></tr>\r\n</table>\r\n<ng-template #editTmpl>\r\n  <form [formGroup]=\"form\">\r\n    <mat-form-field *ngFor=\"let a of axes\">\r\n      <bizdoc-select [placeholder]=\"a.title\" [type]=\"a.dataType\" [formControlName]=\"a.name\" required></bizdoc-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <input matInput type=\"number\" formControlName=\"value\" autocomplete=\"off\" required [placeholder]=\"'Value'|translate\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: ["form{padding:8px 4px 8px 8px;flex-flow:row wrap;box-sizing:border-box;display:flex}form>*{flex:1 1 auto;box-sizing:border-box;width:50%;padding:0 5px 0 0}table{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3$3.Directionality }, { type: UtilityRef, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.Directionality }, { type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
                 }] }, { type: SessionService }, { type: i0.ViewContainerRef }, { type: PromptService }, { type: i1$2.Overlay }]; }, propDecorators: { editTmpl: [{
@@ -29432,7 +29270,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
     }
 };
 DocumentTraceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: SystemService }, { token: SessionService }, { token: PaneRef }, { token: PanesRouter }, { token: PromptService }, { token: TranslateService }, { token: Popup }, { token: GuideService }, { token: i0.ChangeDetectorRef }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DocumentTraceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\r\n  <!-- diagram -->\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      |\r\n      <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n      <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <!-- timeline -->\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- browse -->\r\n  <div *ngSwitchDefault fxFlex fxLayout=\"column\" fxFlexFill>\r\n    <mat-toolbar fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n    <!-- table -->\r\n    <mat-table fxFlex [dataSource]=\"dataSource\" matSort>\r\n      <!-- Number column -->\r\n      <ng-container matColumnDef=\"number\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n      </ng-container>\r\n\r\n      <!-- Subject column -->\r\n      <ng-container matColumnDef=\"subject\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n      </ng-container>\r\n      <!-- StateId column -->\r\n      <ng-container matColumnDef=\"stateId\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n          <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n        </mat-cell>\r\n      </ng-container>\r\n      <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n      <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n               (click)=\"open(item)\">\r\n      </mat-row>\r\n    </mat-table>\r\n    <!-- range -->\r\n    <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM-dd' background=\"transparent\"\r\n                        [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                        groupBy=\"Years\" intervalType='Days'\r\n                        (changed)='rangeChanged($event)'>\r\n      <e-rangenavigator-series-collection>\r\n        <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n        </e-rangenavigator-series>\r\n      </e-rangenavigator-series-collection>\r\n    </ejs-rangenavigator>\r\n  </div>\r\n</ng-container>\r\n<!-- args -->\r\n<ng-template #args>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" fxLayout=\"column\">\r\n    <mat-form-field>\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i12.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i12.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i12.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i3$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.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: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] });
+DocumentTraceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\r\n  <!-- diagram -->\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      |\r\n      <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n      <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <!-- timeline -->\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- browse -->\r\n  <div *ngSwitchDefault fxFlex fxLayout=\"column\" fxFlexFill>\r\n    <mat-toolbar fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n    <!-- table -->\r\n    <mat-table fxFlex [dataSource]=\"dataSource\" matSort>\r\n      <!-- Number column -->\r\n      <ng-container matColumnDef=\"number\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n      </ng-container>\r\n\r\n      <!-- Subject column -->\r\n      <ng-container matColumnDef=\"subject\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n      </ng-container>\r\n      <!-- StateId column -->\r\n      <ng-container matColumnDef=\"stateId\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n          <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n        </mat-cell>\r\n      </ng-container>\r\n      <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n      <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n               (click)=\"open(item)\">\r\n      </mat-row>\r\n    </mat-table>\r\n    <!-- range -->\r\n    <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM-dd' background=\"transparent\"\r\n                        [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                        groupBy=\"Years\" intervalType='Days'\r\n                        (changed)='rangeChanged($event)'>\r\n      <e-rangenavigator-series-collection>\r\n        <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n        </e-rangenavigator-series>\r\n      </e-rangenavigator-series-collection>\r\n    </ejs-rangenavigator>\r\n  </div>\r\n</ng-container>\r\n<!-- args -->\r\n<ng-template #args>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" fxLayout=\"column\">\r\n    <mat-form-field>\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i12.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i12.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i12.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i1$5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.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: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] });
 DocumentTraceComponent = __decorate([
     BizDoc({ selector: 'bizdoc-trace-utility' })
     /** workflow component*/
@@ -29647,7 +29485,7 @@ let PatternsComponent = class PatternsComponent {
         this._destroy.complete();
     }
 };
-PatternsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PatternsComponent, deps: [{ token: SessionService }, { token: i3$3.Directionality }, { token: i2$1.FormBuilder }, { token: UtilityRef }, { token: DatasourceService }, { token: SystemService }, { token: PromptService }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+PatternsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PatternsComponent, deps: [{ token: SessionService }, { token: i1$5.Directionality }, { token: i2$1.FormBuilder }, { token: UtilityRef }, { token: DatasourceService }, { token: SystemService }, { token: PromptService }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
 PatternsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PatternsComponent, selector: "ng-component", viewQueries: [{ propertyName: "properties", first: true, predicate: ["properties"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"create()\" [bizdocTooltip]=\"'Add'|translate\" data-guide=\"create\"><mat-icon>add</mat-icon></button>\r\n</mat-toolbar>\r\n<table mat-table [dataSource]=\"dataSource\" matSort>\r\n  <ng-container matColumnDef=\"title\" sticky>\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Title'|translate}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.title}} </td>\r\n  </ng-container>\r\n  <ng-container *ngFor=\"let r of roles\" [matColumnDef]=\"r.name\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{r.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <mat-checkbox [checked]=\"element.roles && element.roles.indexOf(r.name) > -1\" (change)=\"toggle(element, r.name, $event)\"></mat-checkbox>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"edit(element)\">{{'Edit'|translate}}</button>\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"delete(element)\">{{'Discard'|translate}}</button>\r\n      </mat-menu>\r\n    </td>\r\n  </ng-container>\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns;\"></tr>\r\n</table>\r\n<mat-paginator [pageSize]=\"PAGE_SIZE\" hidePageSize showFirstLastButtons *ngIf=\"paging\"></mat-paginator>\r\n<!-- dialog -->\r\n<ng-template #properties>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"form\" autocomplete=\"off\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'|translate\" required />\r\n      </mat-form-field>\r\n      <div formGroupName=\"axes\" *ngIf=\"cube\" fxLayout.gt-sm=\"row wrap\" fxLayout=\"column wrap\"\r\n           fxLayoutGap=\"5px grid\">\r\n        <ng-container *ngFor=\"let a of cube.axes\">\r\n          <mat-form-field *ngIf=\"include.indexOf(a.name)>-1\" fxFlex=\"50\">\r\n            <input matInput\r\n                   [matAutocomplete]=\"segment\" [pattern]=\"pattern\"\r\n                   [formControlName]=\"a.name\" [placeholder]=\"a.title\" />\r\n            <mat-autocomplete #segment>\r\n              <mat-option *ngFor=\"let o of segments[a.name] | async\" [value]=\"o.key\">{{o.value}}</mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"axes.controls[a.name].invalid\">{{'PatternErr' |translate}}</mat-error>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </div>\r\n      <mat-form-field>\r\n        <mat-select formControlName=\"roles\" [placeholder]=\"'Roles'|translate\" multiple required>\r\n          <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.controls.roles.hasError('required')\">{{'Required'|translate:('Roles'|translate)}}</mat-error>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"form.value\" [disabled]=\"!form.valid\">{{'OK'| translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel'| translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<style scoped>\r\n  table {\r\n    width: 100%\r\n  }\r\n</style>\r\n", styles: ["\n  table {\n    width: 100%\n  }\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$2.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: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 PatternsComponent = __decorate([
     BizDoc({
@@ -29657,7 +29495,7 @@ PatternsComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PatternsComponent, decorators: [{
             type: Component,
             args: [{ template: "<mat-toolbar>\r\n  <button mat-button color=\"primary\" (click)=\"save()\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"create()\" [bizdocTooltip]=\"'Add'|translate\" data-guide=\"create\"><mat-icon>add</mat-icon></button>\r\n</mat-toolbar>\r\n<table mat-table [dataSource]=\"dataSource\" matSort>\r\n  <ng-container matColumnDef=\"title\" sticky>\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Title'|translate}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.title}} </td>\r\n  </ng-container>\r\n  <ng-container *ngFor=\"let r of roles\" [matColumnDef]=\"r.name\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{r.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <mat-checkbox [checked]=\"element.roles && element.roles.indexOf(r.name) > -1\" (change)=\"toggle(element, r.name, $event)\"></mat-checkbox>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"edit(element)\">{{'Edit'|translate}}</button>\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"delete(element)\">{{'Discard'|translate}}</button>\r\n      </mat-menu>\r\n    </td>\r\n  </ng-container>\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns;\"></tr>\r\n</table>\r\n<mat-paginator [pageSize]=\"PAGE_SIZE\" hidePageSize showFirstLastButtons *ngIf=\"paging\"></mat-paginator>\r\n<!-- dialog -->\r\n<ng-template #properties>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"form\" autocomplete=\"off\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'|translate\" required />\r\n      </mat-form-field>\r\n      <div formGroupName=\"axes\" *ngIf=\"cube\" fxLayout.gt-sm=\"row wrap\" fxLayout=\"column wrap\"\r\n           fxLayoutGap=\"5px grid\">\r\n        <ng-container *ngFor=\"let a of cube.axes\">\r\n          <mat-form-field *ngIf=\"include.indexOf(a.name)>-1\" fxFlex=\"50\">\r\n            <input matInput\r\n                   [matAutocomplete]=\"segment\" [pattern]=\"pattern\"\r\n                   [formControlName]=\"a.name\" [placeholder]=\"a.title\" />\r\n            <mat-autocomplete #segment>\r\n              <mat-option *ngFor=\"let o of segments[a.name] | async\" [value]=\"o.key\">{{o.value}}</mat-option>\r\n            </mat-autocomplete>\r\n            <mat-error *ngIf=\"axes.controls[a.name].invalid\">{{'PatternErr' |translate}}</mat-error>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </div>\r\n      <mat-form-field>\r\n        <mat-select formControlName=\"roles\" [placeholder]=\"'Roles'|translate\" multiple required>\r\n          <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.controls.roles.hasError('required')\">{{'Required'|translate:('Roles'|translate)}}</mat-error>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"form.value\" [disabled]=\"!form.valid\">{{'OK'| translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel'| translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<style scoped>\r\n  table {\r\n    width: 100%\r\n  }\r\n</style>\r\n" }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: i3$3.Directionality }, { type: i2$1.FormBuilder }, { type: UtilityRef, decorators: [{
+        }], ctorParameters: function () { return [{ type: SessionService }, { type: i1$5.Directionality }, { type: i2$1.FormBuilder }, { type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
                 }] }, { type: DatasourceService }, { type: SystemService }, { type: PromptService }, { type: i2$3.MatDialog }]; }, propDecorators: { properties: [{
@@ -30747,12 +30585,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     }
     save() {
         this.saving = true;
-        this.sections.forEach(s => s.elements.forEach(e => {
-            if (e.privileges && !Object.keys(e.privileges).length)
-                delete e.privileges;
-            e.options = cleanup(e.options);
-        }));
-        return this._ref.execute(this.model).toPromise().then(() => {
+        return this._ref.execute(cleanup(this.model)).toPromise().then(() => {
             this._ps.toast('ChangesSaved');
             this.saving = false;
         }, () => {
@@ -30772,41 +30605,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
         }], ctorParameters: function () { return [{ type: PanesRouter }, { type: PromptService }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
-            }] } });
-function cleanup(params) {
-    if (!params)
-        return null;
-    Object.keys(params).forEach(k => {
-        const val = params[k];
-        if (val === null || val === undefined || (isArray(val) && !val.length))
-            delete params[k];
-        else if (isObject(val))
-            params[k] = cleanup(val);
-    });
-    if (!Object.keys(params).length)
-        return null;
-    return params;
-}
+            }] } });
 
 /** */
 let FormDesignerComponent = class FormDesignerComponent {
-    constructor(_fb, _pane, _cd, _ps, _session, _ref) {
+    constructor(_fb, _pane, _cd, _ps, _session, _el, _ref) {
         this._fb = _fb;
         this._pane = _pane;
         this._cd = _cd;
         this._ps = _ps;
         this._session = _session;
+        this._el = _el;
         this._ref = _ref;
         this.loading = true;
         this.tools = true;
         this.saving = false;
         this.history = [];
-        this.historyIndex = 0;
+        this.historyIndex = -1;
         this.form = this._fb.group({
             subject: null,
             value: null,
             cube: null,
             summary: null,
+            sections: this._fb.array([])
         });
         this.dirty = false;
         this.settings = false;
@@ -30820,40 +30641,72 @@ let FormDesignerComponent = class FormDesignerComponent {
         });
         this.form.valueChanges.pipe().
             subscribe(v => {
-            this._notifyChange();
+            //this._notifyChange();
             Object.assign(this.model, v);
         });
     }
     _open(formId) {
         this._ref.populate(formId).subscribe(r => {
             this._formId = formId;
-            this.model = r || { sections: [] };
+            this._assign(r);
             this.loading = false;
         });
     }
+    _assign(model) {
+        this.model = model || { sections: [] };
+        const sections = this.form.get('sections');
+        sections.clear({ emitEvent: false });
+        this.form.patchValue(this.model, { emitEvent: false });
+        model.sections?.forEach(s => sections.push(this._sectionform(s), { emitEvent: false }));
+    }
+    _sectionform(section) {
+        const name = this._fb.control(section.name, Validators.required);
+        return this._fb.group({
+            name,
+            title: section.title,
+            multiLine: section.multiLine || false,
+            value: section.value || null,
+            rows: this._fb.array(section.rows?.map(r => this._rowform(r)) || [])
+        });
+    }
+    _rowform(row) {
+        return this._fb.group({
+            fields: this._fb.array(row.fields.map(f => this._fieldform(f)))
+        });
+    }
+    _fieldform(field) {
+        const name = this._fb.control(field.name, Validators.required), label = this._fb.control(field.label, Validators.required);
+        return this._fb.group({
+            name,
+            label,
+            kind: field.kind,
+            dataType: field.dataType,
+            required: field.required
+        });
+    }
     addSection(evt) {
+        this._notifyChange();
         let n = 0, name, title;
         do {
             n++;
-            name = 'section' + '-' + n;
+            name = 'section' + '_' + n;
             title = 'Section' + ' ' + n;
         } while (this.model.sections.find(s => s.name === name || s.title === title));
-        this._notifyChange();
-        this.model.sections.push({
+        this.form.get('sections').push(this._sectionform({
             name,
             title,
             rows: [{ fields: [] }]
-        });
+        }));
         this._cd.detectChanges();
-        evt.target.querySelector('input')?.focus();
+        this._el.nativeElement.querySelector('section:last-child button')?.focus();
     }
     addRow(section, evt) {
         this._notifyChange();
-        section.rows.push({
+        section.get('rows').push(this._rowform({
             fields: []
-        });
-        evt.target.querySelector('input')?.focus();
+        }));
         this._cd.detectChanges();
+        this._el.nativeElement.querySelector(`section[data-index='${this.form.get('sections').controls.indexOf(section)}'] .designer-row:last-child button`)?.focus();
     }
     addField(section, row, kind, evt) {
         let n = 0, name, label;
@@ -30861,65 +30714,77 @@ let FormDesignerComponent = class FormDesignerComponent {
             n++;
             name = 'field' + '_' + n;
             label = 'Field' + ' ' + n;
-        } while (section.rows.find(r => r.fields.find(f => f.name === name || f.label === label) != null));
+        } while (section.get('rows').controls.
+            find(r => r.get('fields').controls.find(f => f.value.name === name || f.value.label === label) != null));
         this._notifyChange();
-        row.fields.push({
+        row.get('fields').push(this._fieldform({
             kind,
             name,
             label,
-        });
+        }));
         this._cd.detectChanges();
-        evt.target.querySelector('input')?.focus();
+        this._el.nativeElement.querySelector(`section[data-index='${this.form.get('sections').controls.indexOf(section)}'] .designer-row[data-index='${section.get('rows').controls.indexOf(row)}'] .designer-field:last-child input`)?.focus();
     }
     removeField(row, field) {
         this._notifyChange();
-        row.fields.remove(field);
+        row.get('fields').controls.remove(field);
     }
     removeSection(section) {
         this._notifyChange();
-        this.model.sections.remove(section);
+        this.form.get('sections').controls.remove(section);
     }
     removeRow(section, row) {
         this._notifyChange();
-        section.rows.remove(row);
+        section.get('rows').controls.remove(row);
     }
     _notifyChange() {
-        this.history.push(this.model);
+        this.history.push(JSON.stringify(this.model));
         this.historyIndex = this.history.length - 1;
         this.dirty = true;
     }
+    _restore() {
+        this._assign(JSON.parse(this.history[this.historyIndex]));
+    }
     undo() {
-        this.model = this.history[this.historyIndex];
+        this._restore();
         this.historyIndex--;
     }
     redo() {
-        this.model = this.history[this.historyIndex];
         this.historyIndex++;
+        this._restore();
     }
     /**
      * Ctrl-s save; Ctrl-z undo
      * @param event
      */
     handleKeyboardEvent(event) {
-        if (this.dirty && event.ctrlKey) {
+        if (event.ctrlKey) {
             if (event.which === 83 || event.which === 115) {
-                this.save();
+                this.dirty && this.save();
                 event.preventDefault();
             }
         }
     }
-    drop(event) {
+    drop(event, collection) {
         this._notifyChange();
         if (event.previousContainer === event.container) {
-            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            const element = collection.at(event.previousIndex);
+            collection.removeAt(event.previousIndex);
+            collection.insert(event.currentIndex, element);
+            //moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
         }
         else {
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            //  transferArrayItem(
+            //    event.previousContainer.data,
+            //    event.container.data,
+            //    event.previousIndex,
+            //    event.currentIndex,
+            //  );
         }
     }
     save() {
         this.saving = true;
-        this._ref.execute({ metadata: this.model, formId: this._formId }).subscribe(() => {
+        this._ref.execute({ metadata: cleanup(this.model), formId: this._formId }).subscribe(() => {
             this._ps.toast('ChangesSaved');
             this.dirty = false;
             this.saving = false;
@@ -30929,15 +30794,15 @@ let FormDesignerComponent = class FormDesignerComponent {
         });
     }
 };
-FormDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignerComponent, deps: [{ token: i2$1.FormBuilder }, { token: PaneRef }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: SessionService }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
-FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === 0\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon>redo</mat-icon></button>\r\n</mat-toolbar>\r\n<button mat-icon-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"settings\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Value'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Subject'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"subject\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Summary'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"summary\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Analysis'|translate}}</mat-label>\r\n    <mat-select formControlName=\"cube\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<div class=\"form\" autocomplete=\"off\" *ngIf=\"model\" cdkDropList [cdkDropListData]=\"model.sections\" (cdkDropListDropped)=\"drop($event)\">\r\n  <section class=\"column\" *ngFor=\"let s of model.sections\" cdkDrag>\r\n    <div class=\"row\">\r\n      <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.title\" />\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.name\" />\r\n        </mat-form-field>\r\n        <div cdkDropList [cdkDropListData]=\"s.rows\" (cdkDropListDropped)=\"drop($event)\">\r\n          <div *ngFor=\"let r of s.rows\" class=\"row designer-row\" cdkDrag>\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n            <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"r.fields\" (cdkDropListDropped)=\"drop($event)\" class=\"row\">\r\n              <div *ngFor=\"let f of r.fields\" cdkDrag class=\"field row\">\r\n                <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"column\">\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Name'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.name\" />\r\n                  </mat-form-field>\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Label'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.label\" />\r\n                  </mat-form-field>\r\n                  <ng-container [ngSwitch]=\"f.kind\">\r\n                    <mat-form-field *ngSwitchCase=\"'Date'\">\r\n                      <input matInput [required]=\"f.required\" />\r\n                    </mat-form-field>\r\n                    <div *ngSwitchCase=\"'Text'\">\r\n                    </div>\r\n                    <mat-form-field *ngSwitchCase=\"'Select'\">\r\n                      <mat-label>{{'DataType'|translate}}</mat-label>\r\n                      <mat-select [(value)]=\"f.dataType\" required>\r\n                        <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n                      </mat-select>\r\n                    </mat-form-field>\r\n                    <div *ngSwitchDefault>\r\n                      <mat-form-field>\r\n                        <mat-label>{{'Type'|translate}}</mat-label>\r\n                        <mat-select [(value)]=\"f.kind\" required>\r\n                          <mat-option value=\"String\">{{'None'|translate}}</mat-option>\r\n                          <mat-option value=\"Number\">{{'Number'|translate}}</mat-option>\r\n                          <mat-option value=\"PhoneNumber\">{{'PhoneNumber'|translate}}</mat-option>\r\n                          <mat-option value=\"EmailAddress\">{{'EmailAddress'|translate}}</mat-option>\r\n                          <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n                        </mat-select>\r\n                      </mat-form-field>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"actions\">\r\n                  <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n                <div *cdkDragPlaceholder class=\"drag-placeholder\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"column\">\r\n              <button mat-stroked-button [matMenuTriggerFor]=\"fieldKindMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n              <mat-menu #fieldKindMenu>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'String', $event)\">{{'Input'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Date', $event)\">{{'Date'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Select', $event)\">{{'Select'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Checkbox', $event)\">{{'Checkbox'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Switch', $event)\">{{'Switch'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Text', $event)\">{{'Text'|translate}}</button>\r\n              </mat-menu>\r\n              <span class=\"divider\"></span>\r\n              <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n      <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'Value'|translate}}</mat-label>\r\n      <bizdoc-ace-input [(value)]=\"s.value\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n  </section>\r\n  <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n</div>\r\n", styles: [".form{margin:8px}section,.designer-row,.field{border:2px solid transparent;border-radius:3px;padding:8px}section:hover,.designer-row:hover,.field:hover{border:2px dotted}section .designer-row .field{flex:1}.drag-placeholder{border:2px dashed}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i11$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.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: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignerComponent, deps: [{ token: i2$1.FormBuilder }, { token: PaneRef }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: SessionService }, { token: i0.ElementRef }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
+FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon>redo</mat-icon></button>\r\n</mat-toolbar>\r\n<button mat-icon-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div class=\"column\" *ngIf=\"settings\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Value'|translate}}</mat-label>\r\n      <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Subject'|translate}}</mat-label>\r\n      <bizdoc-ace-input formControlName=\"subject\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Summary'|translate}}</mat-label>\r\n      <bizdoc-ace-input formControlName=\"summary\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Analysis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, form.get('sections'))\">\r\n    <section class=\"column\" *ngFor=\"let s of form.get('sections').controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <mat-form-field>\r\n            <mat-label>{{'Title'|translate}}</mat-label>\r\n            <input matInput formControlName=\"title\" />\r\n          </mat-form-field>\r\n          <mat-form-field>\r\n            <mat-label>{{'Name'|translate}}</mat-label>\r\n            <input matInput formControlName=\"name\" required />\r\n          </mat-form-field>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n                  <div class=\"column\" [formGroup]=\"f\">\r\n                    <mat-form-field>\r\n                      <mat-label>{{'Name'|translate}}</mat-label>\r\n                      <input matInput required formControlName=\"name\" />\r\n                    </mat-form-field>\r\n                    <mat-form-field>\r\n                      <mat-label>{{'Label'|translate}}</mat-label>\r\n                      <input matInput required formControlName=\"label\" />\r\n                    </mat-form-field>\r\n                    <mat-checkbox formControlName=\"required\">{{'Mandatory'|translate}}</mat-checkbox>\r\n                    <ng-container [ngSwitch]=\"f.get('kind').value\">\r\n                      <div *ngSwitchCase=\"'Date'\">\r\n                      </div>\r\n                      <div *ngSwitchCase=\"'Text'\">\r\n                      </div>\r\n                      <div *ngSwitchCase=\"'Number'\">\r\n                      </div>\r\n                      <div *ngSwitchCase=\"'Date'\">\r\n                      </div>\r\n                      <mat-form-field *ngSwitchCase=\"'Select'\">\r\n                        <mat-label>{{'DataType'|translate}}</mat-label>\r\n                        <mat-select formControlName=\"dataType\" required>\r\n                          <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n                        </mat-select>\r\n                      </mat-form-field>\r\n                      <div *ngSwitchDefault>\r\n                        <mat-form-field>\r\n                          <mat-label>{{'Type'|translate}}</mat-label>\r\n                          <mat-select formControlName=\"kind\" required>\r\n                            <mat-option value=\"String\">{{'Text'|translate}}</mat-option>\r\n                            <mat-option value=\"PhoneNumber\">{{'Tel'|translate}}</mat-option>\r\n                            <mat-option value=\"EmailAddress\">{{'Email'|translate}}</mat-option>\r\n                            <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n                          </mat-select>\r\n                        </mat-form-field>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                  <div class=\"actions\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldKindMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldKindMenu>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'String', $event)\">{{'Input'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Date', $event)\">{{'Date'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Number', $event)\">{{'Numeric'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Select', $event)\">{{'Select'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Checkbox', $event)\">{{'Checkbox'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Switch', $event)\">{{'Switch'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Text', $event)\">{{'Text'|translate}}</button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n      <div class=\"column\" *ngIf=\"settings\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Value'|translate}}</mat-label>\r\n          <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n          <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}section,.designer-row,.designer-field{border:2px solid transparent;border-radius:3px;padding:8px}section:hover,.designer-row:hover,.designer-field:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$2.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: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FormDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-form-designer' })
 ], FormDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignerComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === 0\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon>redo</mat-icon></button>\r\n</mat-toolbar>\r\n<button mat-icon-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"settings\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Value'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Subject'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"subject\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Summary'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"summary\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Analysis'|translate}}</mat-label>\r\n    <mat-select formControlName=\"cube\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<div class=\"form\" autocomplete=\"off\" *ngIf=\"model\" cdkDropList [cdkDropListData]=\"model.sections\" (cdkDropListDropped)=\"drop($event)\">\r\n  <section class=\"column\" *ngFor=\"let s of model.sections\" cdkDrag>\r\n    <div class=\"row\">\r\n      <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.title\" />\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.name\" />\r\n        </mat-form-field>\r\n        <div cdkDropList [cdkDropListData]=\"s.rows\" (cdkDropListDropped)=\"drop($event)\">\r\n          <div *ngFor=\"let r of s.rows\" class=\"row designer-row\" cdkDrag>\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n            <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"r.fields\" (cdkDropListDropped)=\"drop($event)\" class=\"row\">\r\n              <div *ngFor=\"let f of r.fields\" cdkDrag class=\"field row\">\r\n                <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"column\">\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Name'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.name\" />\r\n                  </mat-form-field>\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Label'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.label\" />\r\n                  </mat-form-field>\r\n                  <ng-container [ngSwitch]=\"f.kind\">\r\n                    <mat-form-field *ngSwitchCase=\"'Date'\">\r\n                      <input matInput [required]=\"f.required\" />\r\n                    </mat-form-field>\r\n                    <div *ngSwitchCase=\"'Text'\">\r\n                    </div>\r\n                    <mat-form-field *ngSwitchCase=\"'Select'\">\r\n                      <mat-label>{{'DataType'|translate}}</mat-label>\r\n                      <mat-select [(value)]=\"f.dataType\" required>\r\n                        <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n                      </mat-select>\r\n                    </mat-form-field>\r\n                    <div *ngSwitchDefault>\r\n                      <mat-form-field>\r\n                        <mat-label>{{'Type'|translate}}</mat-label>\r\n                        <mat-select [(value)]=\"f.kind\" required>\r\n                          <mat-option value=\"String\">{{'None'|translate}}</mat-option>\r\n                          <mat-option value=\"Number\">{{'Number'|translate}}</mat-option>\r\n                          <mat-option value=\"PhoneNumber\">{{'PhoneNumber'|translate}}</mat-option>\r\n                          <mat-option value=\"EmailAddress\">{{'EmailAddress'|translate}}</mat-option>\r\n                          <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n                        </mat-select>\r\n                      </mat-form-field>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"actions\">\r\n                  <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n                <div *cdkDragPlaceholder class=\"drag-placeholder\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"column\">\r\n              <button mat-stroked-button [matMenuTriggerFor]=\"fieldKindMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n              <mat-menu #fieldKindMenu>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'String', $event)\">{{'Input'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Date', $event)\">{{'Date'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Select', $event)\">{{'Select'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Checkbox', $event)\">{{'Checkbox'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Switch', $event)\">{{'Switch'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Text', $event)\">{{'Text'|translate}}</button>\r\n              </mat-menu>\r\n              <span class=\"divider\"></span>\r\n              <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n      <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'Value'|translate}}</mat-label>\r\n      <bizdoc-ace-input [(value)]=\"s.value\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n  </section>\r\n  <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n</div>\r\n", styles: [".form{margin:8px}section,.designer-row,.field{border:2px solid transparent;border-radius:3px;padding:8px}section:hover,.designer-row:hover,.field:hover{border:2px dotted}section .designer-row .field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: PaneRef }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: SessionService }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
+            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon>redo</mat-icon></button>\r\n</mat-toolbar>\r\n<button mat-icon-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div class=\"column\" *ngIf=\"settings\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Value'|translate}}</mat-label>\r\n      <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Subject'|translate}}</mat-label>\r\n      <bizdoc-ace-input formControlName=\"subject\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Summary'|translate}}</mat-label>\r\n      <bizdoc-ace-input formControlName=\"summary\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Analysis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, form.get('sections'))\">\r\n    <section class=\"column\" *ngFor=\"let s of form.get('sections').controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <mat-form-field>\r\n            <mat-label>{{'Title'|translate}}</mat-label>\r\n            <input matInput formControlName=\"title\" />\r\n          </mat-form-field>\r\n          <mat-form-field>\r\n            <mat-label>{{'Name'|translate}}</mat-label>\r\n            <input matInput formControlName=\"name\" required />\r\n          </mat-form-field>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n                  <div class=\"column\" [formGroup]=\"f\">\r\n                    <mat-form-field>\r\n                      <mat-label>{{'Name'|translate}}</mat-label>\r\n                      <input matInput required formControlName=\"name\" />\r\n                    </mat-form-field>\r\n                    <mat-form-field>\r\n                      <mat-label>{{'Label'|translate}}</mat-label>\r\n                      <input matInput required formControlName=\"label\" />\r\n                    </mat-form-field>\r\n                    <mat-checkbox formControlName=\"required\">{{'Mandatory'|translate}}</mat-checkbox>\r\n                    <ng-container [ngSwitch]=\"f.get('kind').value\">\r\n                      <div *ngSwitchCase=\"'Date'\">\r\n                      </div>\r\n                      <div *ngSwitchCase=\"'Text'\">\r\n                      </div>\r\n                      <div *ngSwitchCase=\"'Number'\">\r\n                      </div>\r\n                      <div *ngSwitchCase=\"'Date'\">\r\n                      </div>\r\n                      <mat-form-field *ngSwitchCase=\"'Select'\">\r\n                        <mat-label>{{'DataType'|translate}}</mat-label>\r\n                        <mat-select formControlName=\"dataType\" required>\r\n                          <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n                        </mat-select>\r\n                      </mat-form-field>\r\n                      <div *ngSwitchDefault>\r\n                        <mat-form-field>\r\n                          <mat-label>{{'Type'|translate}}</mat-label>\r\n                          <mat-select formControlName=\"kind\" required>\r\n                            <mat-option value=\"String\">{{'Text'|translate}}</mat-option>\r\n                            <mat-option value=\"PhoneNumber\">{{'Tel'|translate}}</mat-option>\r\n                            <mat-option value=\"EmailAddress\">{{'Email'|translate}}</mat-option>\r\n                            <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n                          </mat-select>\r\n                        </mat-form-field>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                  <div class=\"actions\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldKindMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldKindMenu>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'String', $event)\">{{'Input'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Date', $event)\">{{'Date'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Number', $event)\">{{'Numeric'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Select', $event)\">{{'Select'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Checkbox', $event)\">{{'Checkbox'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Switch', $event)\">{{'Switch'|translate}}</button>\r\n                  <button mat-menu-item (click)=\"addField(s, r, 'Text', $event)\">{{'Text'|translate}}</button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n      <div class=\"column\" *ngIf=\"settings\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Value'|translate}}</mat-label>\r\n          <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n          <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}section,.designer-row,.designer-field{border:2px solid transparent;border-radius:3px;padding:8px}section:hover,.designer-row:hover,.designer-field:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: PaneRef }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: SessionService }, { type: i0.ElementRef }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -31191,7 +31056,7 @@ class IconPickerComponent {
     }
 }
 IconPickerComponent.nextId = 0;
-IconPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IconPickerComponent, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i1$2.Overlay }, { token: i1.HttpClient }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i3$3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+IconPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IconPickerComponent, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i1$2.Overlay }, { token: i1.HttpClient }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1$5.Directionality }], target: i0.ɵɵFactoryTarget.Component });
 IconPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: { value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" />\r\n    <div *ngFor=\"let c of categories; trackBy: _trackBy\">\r\n      <span></span>\r\n      <div>\r\n        <mat-icon *ngFor=\"let i of c.items; trackBy: _trackBy\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IconPickerComponent, decorators: [{
             type: Component,
@@ -31200,7 +31065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i1$2.Overlay }, { type: i1.HttpClient }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i3$3.Directionality }]; }, propDecorators: { id: [{
+                }] }, { type: i1$2.Overlay }, { type: i1.HttpClient }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i1$5.Directionality }]; }, propDecorators: { id: [{
                 type: HostBinding
             }], value: [{
                 type: Input
@@ -31939,6 +31804,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
             args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd></dd>\r\n    </dl>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
+//[style.background-color]='value'
+class ColorPicker {
+    constructor(ngControl, _overlay, _vc, _element, _dir) {
+        this.ngControl = ngControl;
+        this._overlay = _overlay;
+        this._vc = _vc;
+        this._element = _element;
+        this._dir = _dir;
+        this.controlType = 'bizdoc-color-picker';
+        this._palettes = MATERIAL_PALETTES;
+        this.scales = ["50",
+            "100",
+            "200",
+            "300",
+            "400",
+            "500",
+            "600",
+            "700",
+            "800",
+            "900"];
+        this.colors = ["red",
+            "pink",
+            "purple",
+            "deepPurple",
+            "indigo",
+            "blue",
+            "lightBlue",
+            "cyan",
+            "teal",
+            "green",
+            "lightGreen",
+            "lime",
+            "yellow",
+            "amber",
+            "orange",
+            "brown",
+            "grey",
+            "blueGrey"];
+        this.Object = Object;
+        this._required = false;
+        this._disabled = false;
+        this.stateChanges = new Subject();
+        this.valueChanges = new Subject();
+        this.id = `color-picker-${ColorPicker.nextId++}`;
+        this.focused = false;
+        this.errorState = false;
+        this.describedBy = '';
+        this._destroy = new Subject();
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(obj) {
+        this._value = obj;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    get value() { return this._value; }
+    set value(val) {
+        this._value = val;
+        this._onChange && this._onChange(val);
+        this.valueChanges.next(val);
+        this.stateChanges.next();
+    }
+    get empty() {
+        return this._value === null;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(req) {
+        this._required = req;
+        this.stateChanges.next();
+    }
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        this._disabled = value;
+        this.stateChanges.next();
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick(_event) {
+        this._onTouched && this._onTouched();
+        this.open();
+    }
+    ngOnDestroy() {
+        this._destroy.next();
+        this._destroy.complete();
+    }
+    open() {
+        if (!this._overlayRef)
+            this._overlayRef = this._createOverlay();
+        const portal = new TemplatePortal(this._colorPalette, this._vc);
+        this._overlayRef.attach(portal);
+    }
+    close() {
+        this._overlayRef.detach();
+    }
+    _pick(color) {
+        this.value = color;
+        this.close();
+    }
+    _createOverlay() {
+        const ref = this._overlay.create({
+            positionStrategy: this._overlay.position().flexibleConnectedTo(this._element).withPositions([{
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top'
+                }, {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom'
+                }]),
+            direction: this._dir.value,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop'
+        });
+        merge(ref.backdropClick(), ref.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).subscribe(() => this.close());
+        return ref;
+    }
+}
+ColorPicker.nextId = 0;
+ColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1$5.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ColorPicker, selector: "bizdoc-color-picker", inputs: { label: "label", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizdoc-color-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                        '[attr.aria-describedby]': 'describedBy'
+                    }, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i1$5.Directionality }]; }, propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanges: [{
+                type: Output
+            }], id: [{
+                type: HostBinding
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], describedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], _colorPalette: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
 let StateDesignComponent = class StateDesignComponent extends DesignerTypeElementComponent {
     ngOnInit() {
         this.form.addControl('color', this._fb.control(this.model.color), { emitEvent: false });
@@ -31947,13 +31983,13 @@ let StateDesignComponent = class StateDesignComponent extends DesignerTypeElemen
     }
 };
 StateDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StateDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Color'|translate}}</mat-label>\r\n      <input matInput formControlName=\"color\" />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'BackgroundColor'|translate}}</mat-label>\r\n      <input matInput formControlName=\"backgroundColor\" />\r\n    </mat-form-field>\r\n      <!--<bizdoc-color-picker formControlName=\"backgroundColor\" ></bizdoc-color-picker>-->\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.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: "pipe", type: TranslatePipe, name: "translate" }] });
+StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n    </div>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.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: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 StateDesignComponent = __decorate([
     BizDoc({ selector: 'state-designer' })
 ], StateDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StateDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Color'|translate}}</mat-label>\r\n      <input matInput formControlName=\"color\" />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'BackgroundColor'|translate}}</mat-label>\r\n      <input matInput formControlName=\"backgroundColor\" />\r\n    </mat-form-field>\r\n      <!--<bizdoc-color-picker formControlName=\"backgroundColor\" ></bizdoc-color-picker>-->\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n    </div>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let ReturnToRoleActionDesignComponent = class ReturnToRoleActionDesignComponent extends DesignerElementComponent {
@@ -32049,7 +32085,7 @@ SystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         ConfigurationDesignerComponent, FormDesignerComponent, DesignerItemComponent,
         PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
         UtilityWrapperComponent, UtilityPaneComponent,
-        SearchInput,
+        SearchInput, ColorPicker,
         ReassignDialog,
         SystemDiffComponent, DocumentTraceComponent, TraceElementComponent, ProfilerComponent,
         PositionsComponent, PositionsPopup,
@@ -32091,7 +32127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         ConfigurationDesignerComponent, FormDesignerComponent, DesignerItemComponent,
                         PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
                         UtilityWrapperComponent, UtilityPaneComponent,
-                        SearchInput,
+                        SearchInput, ColorPicker,
                         ReassignDialog,
                         SystemDiffComponent, DocumentTraceComponent, TraceElementComponent, ProfilerComponent,
                         PositionsComponent, PositionsPopup,
@@ -32307,5 +32343,5 @@ function withRoute(routes) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BackNavigation, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, CollapseNavigation, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePerformanceWidget, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, HelpTipComponent, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationClose, NavigationEnd, NavigationExpand, NavigationFocus, NavigationMode, NavigationResize, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, cleanup$1 as cleanup, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
+export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BackNavigation, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, CollapseNavigation, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePerformanceWidget, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, HelpTipComponent, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationClose, NavigationEnd, NavigationExpand, NavigationFocus, NavigationMode, NavigationResize, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, cleanup, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
 //# sourceMappingURL=bizdoc-core.mjs.map