@bizdoc/core 2.1.9 → 2.1.11

package/fesm2022/bizdoc-core.mjs

@@ -3004,6 +3004,9 @@ class SystemService {
     synchrinize(name) {
         return this._http.post(`/api/system/cube/${encodeURIComponent(name)}/synchronize`, {});
     }
+    execute(name) {
+        return this._http.post(`/api/system/job/${encodeURIComponent(name)}/execute`, {});
+    }
     static { this._cache = {}; }
     findAll(options) {
         const params = {};
@@ -3053,6 +3056,9 @@ class SystemService {
     cube(name) {
         return this._http.get(`/api/system/cube/${encodeURIComponent(name)}`);
     }
+    job(name) {
+        return this._http.get(`/api/system/job/${encodeURIComponent(name)}`);
+    }
     /**
      *
      * @param name
@@ -3176,11 +3182,11 @@ class ControlOptionsComponent {
         //moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ControlOptionsComponent, deps: [{ token: TranslateService }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: { form: "form", model: "model" }, ngImport: i0, template: "<h2 class=\"mat-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\" floatLabel=\"never\">\r\n      <input matInput [placeholder]=\"'Key'|l18n\" formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: { form: "form", model: "model" }, ngImport: i0, template: "<h2 class=\"mat-mdc-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\" floatLabel=\"never\">\r\n      <input matInput [placeholder]=\"'Key'|l18n\" formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ControlOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-design-options', template: "<h2 class=\"mat-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\" floatLabel=\"never\">\r\n      <input matInput [placeholder]=\"'Key'|l18n\" formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'bizdoc-design-options', template: "<h2 class=\"mat-mdc-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\" floatLabel=\"never\">\r\n      <input matInput [placeholder]=\"'Key'|l18n\" formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: TranslateService }, { type: i1.FormBuilder }]; }, propDecorators: { form: [{
                 type: Input
             }], model: [{
@@ -5230,7 +5236,7 @@ const SwapAnimation = [
     transition(':decrement', [style({ transform: 'translateX(-100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))])
 ];
 const matrixAnimation = trigger('table', [transition('void=>*', [
-        query('.mat-row', [
+        query('.mat-mdc-row', [
             style({ opacity: 0, transform: 'translateX(10px)' }),
             stagger(100, style({ opacity: 1, transform: 'none' }))
         ], { optional: true })
@@ -7373,7 +7379,7 @@ class NoneComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NoneComponent, selector: "bizdoc-none", inputs: { title: "title", subtitle: "subtitle", icon: "icon" }, ngImport: i0, template: `<div class="none" @none>
-  <h4 class="mat-title">{{title|translate}}</h4>
+  <h4 class="mat-mdc-title">{{title|translate}}</h4>
   <mat-icon class="icon">{{icon}}</mat-icon>
   <h5 class="mat-body-2" *ngIf='subtitle' [innerHTML]='subtitle|translate|sanitizeHtml'></h5>
 </div>`, isInline: true, styles: [".none{align-items:center;display:flex;flex-direction:column;opacity:.2;padding-top:2em;cursor:default}.none .icon{font-size:56px;height:auto;width:auto}.none h5{padding:0 8px}.none h5 ::ng-deep i.material-icons{vertical-align:text-bottom;font-size:initial}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], animations: [noneAnimation] }); }
@@ -7381,7 +7387,7 @@ class NoneComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-none', template: `<div class="none" @none>
-  <h4 class="mat-title">{{title|translate}}</h4>
+  <h4 class="mat-mdc-title">{{title|translate}}</h4>
   <mat-icon class="icon">{{icon}}</mat-icon>
   <h5 class="mat-body-2" *ngIf='subtitle' [innerHTML]='subtitle|translate|sanitizeHtml'></h5>
 </div>`, animations: [noneAnimation], styles: [".none{align-items:center;display:flex;flex-direction:column;opacity:.2;padding-top:2em;cursor:default}.none .icon{font-size:56px;height:auto;width:auto}.none h5{padding:0 8px}.none h5 ::ng-deep i.material-icons{vertical-align:text-bottom;font-size:initial}\n"] }]
@@ -7475,7 +7481,7 @@ class AttachmentPreview {
         this.animationState = 'leave';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AttachmentPreview, deps: [{ token: i3.Directionality }, { token: i0.Renderer2 }, { token: FILE_PREVIEW_DIALOG_DATA }, { token: i2$1.DomSanitizer }, { token: MailboxService }, { token: i1$1.OverlayRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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\" class=\"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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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 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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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 })),
@@ -7515,7 +7521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                             state('leave', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
                             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\" class=\"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"] }]
+                    ], 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 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.Directionality }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FILE_PREVIEW_DIALOG_DATA]
@@ -12199,11 +12205,11 @@ class CommentEditsComponent {
         this.versions = this._mailbox.edits(this._data.documentId, this._data.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommentEditsComponent, deps: [{ token: POPUP_DATA }, { token: MailboxService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommentEditsComponent, selector: "bizdoc-comment-edits", ngImport: i0, template: "<span class=\"mat-title\">{{'History' | translate}}</span>\r\n\r\n<div *ngFor=\"let v of versions | async\" class=\"comment\">\r\n  <p [innerHTML]=\"v.text|taggingHtml:resource\"></p>\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\" *ngIf=\"v.byId || byId\"></bizdoc-identity-name>\r\n  <small>{{v.time | amCalendar}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommentEditsComponent, selector: "bizdoc-comment-edits", ngImport: i0, template: "<span class=\"mat-mdc-title\">{{'History' | translate}}</span>\r\n\r\n<div *ngFor=\"let v of versions | async\" class=\"comment\">\r\n  <p [innerHTML]=\"v.text|taggingHtml:resource\"></p>\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\" *ngIf=\"v.byId || byId\"></bizdoc-identity-name>\r\n  <small>{{v.time | amCalendar}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommentEditsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-comment-edits', template: "<span class=\"mat-title\">{{'History' | translate}}</span>\r\n\r\n<div *ngFor=\"let v of versions | async\" class=\"comment\">\r\n  <p [innerHTML]=\"v.text|taggingHtml:resource\"></p>\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\" *ngIf=\"v.byId || byId\"></bizdoc-identity-name>\r\n  <small>{{v.time | amCalendar}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"] }]
+            args: [{ selector: 'bizdoc-comment-edits', template: "<span class=\"mat-mdc-title\">{{'History' | translate}}</span>\r\n\r\n<div *ngFor=\"let v of versions | async\" class=\"comment\">\r\n  <p [innerHTML]=\"v.text|taggingHtml:resource\"></p>\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\" *ngIf=\"v.byId || byId\"></bizdoc-identity-name>\r\n  <small>{{v.time | amCalendar}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POPUP_DATA]
@@ -12226,11 +12232,11 @@ class CommentLikesComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommentLikesComponent, deps: [{ token: POPUP_DATA }, { token: MailboxService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommentLikesComponent, selector: "bizdoc-comment-votes", ngImport: i0, template: "<span class=\"mat-title\">{{'Votes' | translate}}</span>\r\n<div *ngFor=\"let v of votes | async\" class=\"vote\">\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n  <button mat-icon-button><mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon></button>\r\n  <br />\r\n  <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: 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: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommentLikesComponent, selector: "bizdoc-comment-votes", ngImport: i0, template: "<span class=\"mat-mdc-title\">{{'Votes' | translate}}</span>\r\n<div *ngFor=\"let v of votes | async\" class=\"vote\">\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n  <button mat-icon-button><mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon></button>\r\n  <br />\r\n  <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: 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: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommentLikesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-comment-votes', template: "<span class=\"mat-title\">{{'Votes' | translate}}</span>\r\n<div *ngFor=\"let v of votes | async\" class=\"vote\">\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n  <button mat-icon-button><mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon></button>\r\n  <br />\r\n  <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"] }]
+            args: [{ selector: 'bizdoc-comment-votes', template: "<span class=\"mat-mdc-title\">{{'Votes' | translate}}</span>\r\n<div *ngFor=\"let v of votes | async\" class=\"vote\">\r\n  <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n  <button mat-icon-button><mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon></button>\r\n  <br />\r\n  <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n</div>\r\n", styles: [":host{padding:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POPUP_DATA]
@@ -15260,11 +15266,11 @@ class TraceViewComponent extends TraceBase {
         this.versionSelected.emit(log.time);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TraceViewComponent, deps: [{ token: SessionService }, { token: TranslateService }, { token: AccountService }, { token: ChatInfo }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TraceViewComponent, selector: "bizdoc-trace", inputs: { model: "model" }, outputs: { versionSelected: "versionSelected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showMode='route'\">\r\n      <mat-icon>{{ showMode === 'route' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='active'\">\r\n      <mat-icon>{{ showMode === 'active' ? 'check':'' }}</mat-icon>\r\n      <span>{{'ActiveRoute' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='everything'\">\r\n      <mat-icon>{{ showMode === 'everything' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Everything' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: DurationFormatPipe, name: "amDurationFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], animations: [listAnimation, itemAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TraceViewComponent, selector: "bizdoc-trace", inputs: { model: "model" }, outputs: { versionSelected: "versionSelected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showMode='route'\">\r\n      <mat-icon>{{ showMode === 'route' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='active'\">\r\n      <mat-icon>{{ showMode === 'active' ? 'check':'' }}</mat-icon>\r\n      <span>{{'ActiveRoute' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='everything'\">\r\n      <mat-icon>{{ showMode === 'everything' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Everything' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-mdc-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-mdc-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: DurationFormatPipe, name: "amDurationFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], animations: [listAnimation, itemAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TraceViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-trace', animations: [listAnimation, itemAnimation], template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showMode='route'\">\r\n      <mat-icon>{{ showMode === 'route' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='active'\">\r\n      <mat-icon>{{ showMode === 'active' ? 'check':'' }}</mat-icon>\r\n      <span>{{'ActiveRoute' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='everything'\">\r\n      <mat-icon>{{ showMode === 'everything' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Everything' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"] }]
+            args: [{ selector: 'bizdoc-trace', animations: [listAnimation, itemAnimation], template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showMode='route'\">\r\n      <mat-icon>{{ showMode === 'route' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='active'\">\r\n      <mat-icon>{{ showMode === 'active' ? 'check':'' }}</mat-icon>\r\n      <span>{{'ActiveRoute' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showMode='everything'\">\r\n      <mat-icon>{{ showMode === 'everything' ? 'check':'' }}</mat-icon>\r\n      <span>{{'Everything' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-mdc-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-mdc-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: TranslateService }, { type: AccountService }, { type: ChatInfo }, { type: HubService }]; }, propDecorators: { model: [{
                 type: Input
             }], versionSelected: [{
@@ -16306,11 +16312,11 @@ class CubeMatrixComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CubeMatrixComponent, deps: [{ token: PromptService }, { token: CubeService }, { token: SessionService }, { token: TranslateService }, { token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: { seriesTotalLabel: "seriesTotalLabel", xAxisTotalLabel: "xAxisTotalLabel", _cube: ["cube", "_cube"], _xAxis: ["xAxis", "_xAxis"], _series: ["series", "_series"], _indices: ["indices", "_indices"], indexAt: "indexAt", placeAt: "placeAt", scope: "scope", sum: "sum", filters: "filters", loading: "loading", interactive: "interactive" }, outputs: { onExplore: "explore", loadingChange: "loadingChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}.cube-table tfoot tr td{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [matrixAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: { seriesTotalLabel: "seriesTotalLabel", xAxisTotalLabel: "xAxisTotalLabel", _cube: ["cube", "_cube"], _xAxis: ["xAxis", "_xAxis"], _series: ["series", "_series"], _indices: ["indices", "_indices"], indexAt: "indexAt", placeAt: "placeAt", scope: "scope", sum: "sum", filters: "filters", loading: "loading", interactive: "interactive" }, outputs: { onExplore: "explore", loadingChange: "loadingChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table #table class=\"mat-mdc-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-mdc-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-mdc-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-mdc-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-mdc-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-mdc-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-mdc-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-mdc-footer-row\">\r\n      <td class=\"mat-mdc-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-mdc-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-mdc-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}.cube-table tfoot tr td{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [matrixAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CubeMatrixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-cube-matrix', animations: [matrixAnimation], template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}.cube-table tfoot tr td{border-bottom:none}\n"] }]
+            args: [{ selector: 'bizdoc-cube-matrix', animations: [matrixAnimation], template: "<table #table class=\"mat-mdc-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-mdc-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-mdc-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-mdc-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-mdc-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-mdc-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-mdc-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-mdc-footer-row\">\r\n      <td class=\"mat-mdc-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-mdc-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-mdc-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}.cube-table tfoot tr td{border-bottom:none}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: CubeService }, { type: SessionService }, { type: TranslateService }, { type: DatasourceService }]; }, propDecorators: { tableElement: [{
                 type: ViewChild,
                 args: ['table']
@@ -18345,11 +18351,11 @@ class QuickOptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: QuickOptionsComponent, deps: [{ token: PromptService }, { token: GuideService }, { token: OptionsService }, { token: i4$4.MatBottomSheetRef, optional: true }, { token: PopupRef, optional: true }, { token: HubService }, { token: SessionService }, { token: i2$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: QuickOptionsComponent, selector: "bizdoc-quick-options", ngImport: i0, template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-title\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i3$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: i1$2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: QuickOptionsComponent, selector: "bizdoc-quick-options", ngImport: i0, template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-mdc-title\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i3$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: i1$2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: QuickOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-quick-options', template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-title\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"] }]
+            args: [{ selector: 'bizdoc-quick-options', template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-mdc-title\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: GuideService }, { type: OptionsService }, { type: i4$4.MatBottomSheetRef, decorators: [{
                     type: Optional
                 }] }, { type: PopupRef, decorators: [{
@@ -29001,14 +29007,14 @@ let BoxFormComponent = class BoxFormComponent {
         group.addControl(field.name, instance.control);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: BoxFormComponent, deps: [{ token: i1.FormBuilder }, { token: FormRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: BoxFormComponent, selector: "ng-component", ngImport: i0, template: "<form *ngIf=\"mode !== 'compose'; else edit\">\r\n  <section *ngFor=\"let s of metadata.sections\">\r\n    <h2 class=\"mat-title\">{{s.title|localizedString}}</h2>\r\n    <ng-container [ngSwitch]=\"s.multiLine\">\r\n      <ng-container *ngSwitchCase=\"true\">\r\n        <div *ngFor=\"let r of s.rows\" class=\"row\">\r\n          <ng-container *ngFor=\"let f of r.fields\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchDefault>\r\n        <div class=\"row\" *ngFor=\"let r of s.rows\">\r\n          <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                              [mode]=\"mode\"\r\n                              [model]=\"data.model[s.name]\"\r\n                              [attr.data-field]=\"f.name\"\r\n                              [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </section>\r\n</form>\r\n<ng-template #edit>\r\n  <bizdoc-help-tip [name]=\"guide\" *ngIf=\"guide\"></bizdoc-help-tip>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    <section *ngFor=\"let s of metadata.sections\" [attr.data-section]=\"s.name\">\r\n      <h2 class=\"mat-title\">{{s.title|localizedString}}</h2>\r\n      <p class=\"mat-body-1\" *ngIf=\"s.note\">{{s.note|localizedString}}</p>\r\n      <hr />\r\n      <ng-container [ngSwitch]=\"s.multiLine\">\r\n        <ng-container *ngSwitchCase=\"true\" [formArrayName]=\"s.name\">\r\n          <table class=\"mat-table\">\r\n            <thead class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-row\">\r\n                <th class=\"mat-cell\" *ngFor=\"let f of r.fields\">\r\n                </th>\r\n              </tr>\r\n            </thead>\r\n            <tbody class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-row\">\r\n                <td class=\"mat-cell\" *ngFor=\"let f of r.fields\">\r\n                </td>\r\n                <td>\r\n                  <button mat-icon-button></button>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault [formGroupName]=\"s.name\">\r\n          <div class=\"row box-row\" *ngFor=\"let r of s.rows\">\r\n            <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                                [mode]=\"mode\"\r\n                                [model]=\"data.model[s.name]\"\r\n                                [attr.data-field]=\"f.name\"\r\n                                [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </section>\r\n  </form>\r\n</ng-template>\r\n", styles: ["form{padding:8px}section{display:flex;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: HelpTipComponent, selector: "bizdoc-help-tip", inputs: ["name"] }, { kind: "component", type: BoxFormControlComponent, selector: "bizdoc-box-control", inputs: ["form", "mode", "model", "metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: BoxFormComponent, selector: "ng-component", ngImport: i0, template: "<form *ngIf=\"mode !== 'compose'; else edit\">\r\n  <section *ngFor=\"let s of metadata.sections\">\r\n    <h2 class=\"mat-mdc-title\">{{s.title|localizedString}}</h2>\r\n    <ng-container [ngSwitch]=\"s.multiLine\">\r\n      <ng-container *ngSwitchCase=\"true\">\r\n        <div *ngFor=\"let r of s.rows\" class=\"row\">\r\n          <ng-container *ngFor=\"let f of r.fields\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchDefault>\r\n        <div class=\"row\" *ngFor=\"let r of s.rows\">\r\n          <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                              [mode]=\"mode\"\r\n                              [model]=\"data.model[s.name]\"\r\n                              [attr.data-field]=\"f.name\"\r\n                              [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </section>\r\n</form>\r\n<ng-template #edit>\r\n  <bizdoc-help-tip [name]=\"guide\" *ngIf=\"guide\"></bizdoc-help-tip>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    <section *ngFor=\"let s of metadata.sections\" [attr.data-section]=\"s.name\">\r\n      <h2 class=\"mat-mdc-title\">{{s.title|localizedString}}</h2>\r\n      <p class=\"mat-body-1\" *ngIf=\"s.note\">{{s.note|localizedString}}</p>\r\n      <hr />\r\n      <ng-container [ngSwitch]=\"s.multiLine\">\r\n        <ng-container *ngSwitchCase=\"true\" [formArrayName]=\"s.name\">\r\n          <table class=\"mat-mdc-table\">\r\n            <thead class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-mdc-row\">\r\n                <th class=\"mat-mdc-cell\" *ngFor=\"let f of r.fields\">\r\n                </th>\r\n              </tr>\r\n            </thead>\r\n            <tbody class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-mdc-row\">\r\n                <td class=\"mat-mdc-cell\" *ngFor=\"let f of r.fields\">\r\n                </td>\r\n                <td>\r\n                  <button mat-icon-button></button>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault [formGroupName]=\"s.name\">\r\n          <div class=\"row box-row\" *ngFor=\"let r of s.rows\">\r\n            <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                                [mode]=\"mode\"\r\n                                [model]=\"data.model[s.name]\"\r\n                                [attr.data-field]=\"f.name\"\r\n                                [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </section>\r\n  </form>\r\n</ng-template>\r\n", styles: ["form{padding:8px}section{display:flex;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: HelpTipComponent, selector: "bizdoc-help-tip", inputs: ["name"] }, { kind: "component", type: BoxFormControlComponent, selector: "bizdoc-box-control", inputs: ["form", "mode", "model", "metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }] }); }
 };
 BoxFormComponent = __decorate([
     BizDoc({ selector: 'bizdoc-box-form' })
 ], BoxFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: BoxFormComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form *ngIf=\"mode !== 'compose'; else edit\">\r\n  <section *ngFor=\"let s of metadata.sections\">\r\n    <h2 class=\"mat-title\">{{s.title|localizedString}}</h2>\r\n    <ng-container [ngSwitch]=\"s.multiLine\">\r\n      <ng-container *ngSwitchCase=\"true\">\r\n        <div *ngFor=\"let r of s.rows\" class=\"row\">\r\n          <ng-container *ngFor=\"let f of r.fields\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchDefault>\r\n        <div class=\"row\" *ngFor=\"let r of s.rows\">\r\n          <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                              [mode]=\"mode\"\r\n                              [model]=\"data.model[s.name]\"\r\n                              [attr.data-field]=\"f.name\"\r\n                              [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </section>\r\n</form>\r\n<ng-template #edit>\r\n  <bizdoc-help-tip [name]=\"guide\" *ngIf=\"guide\"></bizdoc-help-tip>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    <section *ngFor=\"let s of metadata.sections\" [attr.data-section]=\"s.name\">\r\n      <h2 class=\"mat-title\">{{s.title|localizedString}}</h2>\r\n      <p class=\"mat-body-1\" *ngIf=\"s.note\">{{s.note|localizedString}}</p>\r\n      <hr />\r\n      <ng-container [ngSwitch]=\"s.multiLine\">\r\n        <ng-container *ngSwitchCase=\"true\" [formArrayName]=\"s.name\">\r\n          <table class=\"mat-table\">\r\n            <thead class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-row\">\r\n                <th class=\"mat-cell\" *ngFor=\"let f of r.fields\">\r\n                </th>\r\n              </tr>\r\n            </thead>\r\n            <tbody class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-row\">\r\n                <td class=\"mat-cell\" *ngFor=\"let f of r.fields\">\r\n                </td>\r\n                <td>\r\n                  <button mat-icon-button></button>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault [formGroupName]=\"s.name\">\r\n          <div class=\"row box-row\" *ngFor=\"let r of s.rows\">\r\n            <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                                [mode]=\"mode\"\r\n                                [model]=\"data.model[s.name]\"\r\n                                [attr.data-field]=\"f.name\"\r\n                                [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </section>\r\n  </form>\r\n</ng-template>\r\n", styles: ["form{padding:8px}section{display:flex;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"] }]
+            args: [{ template: "<form *ngIf=\"mode !== 'compose'; else edit\">\r\n  <section *ngFor=\"let s of metadata.sections\">\r\n    <h2 class=\"mat-mdc-title\">{{s.title|localizedString}}</h2>\r\n    <ng-container [ngSwitch]=\"s.multiLine\">\r\n      <ng-container *ngSwitchCase=\"true\">\r\n        <div *ngFor=\"let r of s.rows\" class=\"row\">\r\n          <ng-container *ngFor=\"let f of r.fields\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchDefault>\r\n        <div class=\"row\" *ngFor=\"let r of s.rows\">\r\n          <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                              [mode]=\"mode\"\r\n                              [model]=\"data.model[s.name]\"\r\n                              [attr.data-field]=\"f.name\"\r\n                              [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </section>\r\n</form>\r\n<ng-template #edit>\r\n  <bizdoc-help-tip [name]=\"guide\" *ngIf=\"guide\"></bizdoc-help-tip>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    <section *ngFor=\"let s of metadata.sections\" [attr.data-section]=\"s.name\">\r\n      <h2 class=\"mat-mdc-title\">{{s.title|localizedString}}</h2>\r\n      <p class=\"mat-body-1\" *ngIf=\"s.note\">{{s.note|localizedString}}</p>\r\n      <hr />\r\n      <ng-container [ngSwitch]=\"s.multiLine\">\r\n        <ng-container *ngSwitchCase=\"true\" [formArrayName]=\"s.name\">\r\n          <table class=\"mat-mdc-table\">\r\n            <thead class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-mdc-row\">\r\n                <th class=\"mat-mdc-cell\" *ngFor=\"let f of r.fields\">\r\n                </th>\r\n              </tr>\r\n            </thead>\r\n            <tbody class=\"\" *ngFor=\"let r of s.rows\">\r\n              <tr class=\"mat-mdc-row\">\r\n                <td class=\"mat-mdc-cell\" *ngFor=\"let f of r.fields\">\r\n                </td>\r\n                <td>\r\n                  <button mat-icon-button></button>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault [formGroupName]=\"s.name\">\r\n          <div class=\"row box-row\" *ngFor=\"let r of s.rows\">\r\n            <bizdoc-box-control [metadata]=\"f\" *ngFor=\"let f of r.fields\"\r\n                                [mode]=\"mode\"\r\n                                [model]=\"data.model[s.name]\"\r\n                                [attr.data-field]=\"f.name\"\r\n                                [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </section>\r\n  </form>\r\n</ng-template>\r\n", styles: ["form{padding:8px}section{display:flex;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: FormRef }]; } });
 
 let RolesPerformanceComponent = class RolesPerformanceComponent {
@@ -29731,11 +29737,11 @@ class TraceElementComponent {
             this._chat.open(userId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TraceElementComponent, deps: [{ token: PaneRef }, { token: ChatInfo }, { token: PromptService }, { token: PanesRouter }, { token: TranslateService }, { token: AccountService }, { token: i2$4.MatDialog }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TraceElementComponent, selector: "bizdoc-document-trace-element", ngImport: i0, template: "<h4 class=\"mat-body-2 center\">\r\n  <span *ngIf=\"estimate\">{{'Estimate' | translate}}</span>\r\n  <span *ngIf=\"none\">{{'NoEstimate' | translate}}</span>\r\n  <span *ngIf=\"skip\">{{'Skipped' | translate}}</span>\r\n</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-table\">\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let l of log\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;min-width:300px;display:block}.message{text-align:center}.message>*{vertical-align:text-bottom}table{background:none;width:100%}table tr td{padding-left:2px;padding-right:2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: StatePipe, name: "state" }, { kind: "pipe", type: ActionPipe, name: "action" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TraceElementComponent, selector: "bizdoc-document-trace-element", ngImport: i0, template: "<h4 class=\"mat-body-2 center\">\r\n  <span *ngIf=\"estimate\">{{'Estimate' | translate}}</span>\r\n  <span *ngIf=\"none\">{{'NoEstimate' | translate}}</span>\r\n  <span *ngIf=\"skip\">{{'Skipped' | translate}}</span>\r\n</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-mdc-table\">\r\n  <tbody role=\"rowgroup\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-mdc-row\">\r\n      <td class=\"mat-mdc-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n    <tr *ngFor=\"let l of log\" class=\"mat-mdc-row\">\r\n      <td class=\"mat-mdc-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-mdc-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;min-width:300px;display:block}.message{text-align:center}.message>*{vertical-align:text-bottom}table{background:none;width:100%}table tr td{padding-left:2px;padding-right:2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: StatePipe, name: "state" }, { kind: "pipe", type: ActionPipe, name: "action" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TraceElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-document-trace-element', template: "<h4 class=\"mat-body-2 center\">\r\n  <span *ngIf=\"estimate\">{{'Estimate' | translate}}</span>\r\n  <span *ngIf=\"none\">{{'NoEstimate' | translate}}</span>\r\n  <span *ngIf=\"skip\">{{'Skipped' | translate}}</span>\r\n</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-table\">\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let l of log\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;min-width:300px;display:block}.message{text-align:center}.message>*{vertical-align:text-bottom}table{background:none;width:100%}table tr td{padding-left:2px;padding-right:2px}\n"] }]
+            args: [{ selector: 'bizdoc-document-trace-element', template: "<h4 class=\"mat-body-2 center\">\r\n  <span *ngIf=\"estimate\">{{'Estimate' | translate}}</span>\r\n  <span *ngIf=\"none\">{{'NoEstimate' | translate}}</span>\r\n  <span *ngIf=\"skip\">{{'Skipped' | translate}}</span>\r\n</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-mdc-table\">\r\n  <tbody role=\"rowgroup\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-mdc-row\">\r\n      <td class=\"mat-mdc-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n    <tr *ngFor=\"let l of log\" class=\"mat-mdc-row\">\r\n      <td class=\"mat-mdc-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-mdc-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-mdc-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;min-width:300px;display:block}.message{text-align:center}.message>*{vertical-align:text-bottom}table{background:none;width:100%}table tr td{padding-left:2px;padding-right:2px}\n"] }]
         }], ctorParameters: function () { return [{ type: PaneRef }, { type: ChatInfo }, { type: PromptService }, { type: PanesRouter }, { type: TranslateService }, { type: AccountService }, { type: i2$4.MatDialog }, { type: SessionService }]; } });
 
 class PositionsPopup {
@@ -32091,7 +32097,7 @@ let ProfilerComponent = class ProfilerComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ProfilerComponent, deps: [{ token: PromptService }, { token: UtilityRef }, { token: SessionService }, { token: i2$4.MatDialog }, { token: DocumentInfo }, { token: ChatInfo }, { token: GuideService }, { token: PanesRouter }, { token: i0.ChangeDetectorRef }, { token: PaneRef }, { token: TranslateService }, { token: AccountService }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                    (optionSelected)=\"change($event)\">\r\n    <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n      <span>{{u.name}}</span>\r\n    </mat-option>\r\n  </mat-autocomplete>\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 *ngIf=\"data\" class=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card class=\"flex\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        <span>{{data.info.name}}</span>\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card class=\"flex\" data-help=\"activity\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Activity' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n        <e-series-collection>\r\n        </e-series-collection>\r\n      </ejs-chart>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- pending -->\r\n  <mat-card class=\"flex\" data-help=\"pending\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Pending' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.pending.length; else none\">\r\n        <thead>\r\n          <tr class=\"mat-row\">\r\n            <td class=\"mat-header-cell\"></td>\r\n            <td class=\"mat-header-cell\"></td>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let r of data.pending\" class=\"mat-row\">\r\n            <td class=\"mat-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n            <td class=\"mat-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- positions -->\r\n  <mat-card class=\"flex\" data-help=\"positions\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Positions' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.positions.length; else none\">\r\n        <tr *ngFor=\"let p of data.positions\" class=\"mat-row\">\r\n          <td class=\"mat-cell\">{{p.value }}</td>\r\n          <td class=\"mat-cell\">{{p.role | role}}</td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i12.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i12.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "component", type: i8$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: DifferencePipe, name: "amDifference" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: RolePipe, name: "role" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                    (optionSelected)=\"change($event)\">\r\n    <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n      <span>{{u.name}}</span>\r\n    </mat-option>\r\n  </mat-autocomplete>\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 *ngIf=\"data\" class=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card class=\"flex\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        <span>{{data.info.name}}</span>\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card class=\"flex\" data-help=\"activity\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Activity' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n        <e-series-collection>\r\n        </e-series-collection>\r\n      </ejs-chart>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- pending -->\r\n  <mat-card class=\"flex\" data-help=\"pending\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Pending' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-mdc-table\" *ngIf=\"data.pending.length; else none\">\r\n        <thead>\r\n          <tr class=\"mat-mdc-row\">\r\n            <td class=\"mat-header-cell\"></td>\r\n            <td class=\"mat-header-cell\"></td>\r\n          </tr>\r\n        </thead>\r\n        <tbody role=\"rowgroup\">\r\n          <tr *ngFor=\"let r of data.pending\" class=\"mat-mdc-row\">\r\n            <td class=\"mat-mdc-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n            <td class=\"mat-mdc-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- positions -->\r\n  <mat-card class=\"flex\" data-help=\"positions\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Positions' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-mdc-table\" *ngIf=\"data.positions.length; else none\">\r\n        <tr *ngFor=\"let p of data.positions\" class=\"mat-mdc-row\">\r\n          <td class=\"mat-mdc-cell\">{{p.value }}</td>\r\n          <td class=\"mat-mdc-cell\">{{p.role | role}}</td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i12.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i12.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "component", type: i8$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: DifferencePipe, name: "amDifference" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: RolePipe, name: "role" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ProfilerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-user-profiler' })
@@ -32101,7 +32107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             type: Component,
             args: [{ host: {
                         class: 'pane'
-                    }, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                    (optionSelected)=\"change($event)\">\r\n    <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n      <span>{{u.name}}</span>\r\n    </mat-option>\r\n  </mat-autocomplete>\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 *ngIf=\"data\" class=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card class=\"flex\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        <span>{{data.info.name}}</span>\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card class=\"flex\" data-help=\"activity\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Activity' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n        <e-series-collection>\r\n        </e-series-collection>\r\n      </ejs-chart>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- pending -->\r\n  <mat-card class=\"flex\" data-help=\"pending\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Pending' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.pending.length; else none\">\r\n        <thead>\r\n          <tr class=\"mat-row\">\r\n            <td class=\"mat-header-cell\"></td>\r\n            <td class=\"mat-header-cell\"></td>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let r of data.pending\" class=\"mat-row\">\r\n            <td class=\"mat-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n            <td class=\"mat-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- positions -->\r\n  <mat-card class=\"flex\" data-help=\"positions\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Positions' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.positions.length; else none\">\r\n        <tr *ngFor=\"let p of data.positions\" class=\"mat-row\">\r\n          <td class=\"mat-cell\">{{p.value }}</td>\r\n          <td class=\"mat-cell\">{{p.role | role}}</td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"] }]
+                    }, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                    (optionSelected)=\"change($event)\">\r\n    <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n      <span>{{u.name}}</span>\r\n    </mat-option>\r\n  </mat-autocomplete>\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 *ngIf=\"data\" class=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card class=\"flex\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        <span>{{data.info.name}}</span>\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card class=\"flex\" data-help=\"activity\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Activity' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n        <e-series-collection>\r\n        </e-series-collection>\r\n      </ejs-chart>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- pending -->\r\n  <mat-card class=\"flex\" data-help=\"pending\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Pending' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-mdc-table\" *ngIf=\"data.pending.length; else none\">\r\n        <thead>\r\n          <tr class=\"mat-mdc-row\">\r\n            <td class=\"mat-header-cell\"></td>\r\n            <td class=\"mat-header-cell\"></td>\r\n          </tr>\r\n        </thead>\r\n        <tbody role=\"rowgroup\">\r\n          <tr *ngFor=\"let r of data.pending\" class=\"mat-mdc-row\">\r\n            <td class=\"mat-mdc-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n            <td class=\"mat-mdc-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- positions -->\r\n  <mat-card class=\"flex\" data-help=\"positions\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Positions' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-mdc-table\" *ngIf=\"data.positions.length; else none\">\r\n        <tr *ngFor=\"let p of data.positions\" class=\"mat-mdc-row\">\r\n          <td class=\"mat-mdc-cell\">{{p.value }}</td>\r\n          <td class=\"mat-mdc-cell\">{{p.role | role}}</td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: UtilityRef }, { type: SessionService }, { type: i2$4.MatDialog }, { type: DocumentInfo }, { type: ChatInfo }, { type: GuideService }, { type: PanesRouter }, { type: i0.ChangeDetectorRef }, { type: PaneRef }, { type: TranslateService }, { type: AccountService }, { type: i1.FormBuilder }]; }, propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['activity']
@@ -32239,11 +32245,11 @@ class DesignerPrivilegesComponent {
         this.search.setValue(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DesignerPrivilegesComponent, deps: [{ token: i1.FormBuilder }, { token: SystemService }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: { form: "form" }, ngImport: i0, template: "<h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-chip-grid #chips [attr.aria-label]=\"''\">\r\n      <mat-chip-row *ngFor=\"let r of form.get('roles').value\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"remove(r)\">\r\n        {{titleOf(r)}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input [placeholder]=\"'Roles'|translate\"\r\n           [formControl]=search\r\n           #inputrole\r\n           [matAutocomplete]=\"nametype\"\r\n           [matChipInputFor]=\"chips\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #nametype=\"matAutocomplete\" (optionSelected)=\"add(inputrole, $event)\">\r\n      <ng-container *ngFor=\"let r of roles\">\r\n        <mat-option *ngIf=\"!form.get('roles').value || form.get('roles').value.indexOf(r.name)<0\" [value]=\"r.name\">\r\n          {{r.title || r.name}}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: { form: "form" }, ngImport: i0, template: "<h2 class=\"mat-mdc-title\">{{'Privileges'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-chip-grid #chips [attr.aria-label]=\"''\">\r\n      <mat-chip-row *ngFor=\"let r of form.get('roles').value\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"remove(r)\">\r\n        {{titleOf(r)}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input [placeholder]=\"'Roles'|translate\"\r\n           [formControl]=search\r\n           #inputrole\r\n           [matAutocomplete]=\"nametype\"\r\n           [matChipInputFor]=\"chips\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #nametype=\"matAutocomplete\" (optionSelected)=\"add(inputrole, $event)\">\r\n      <ng-container *ngFor=\"let r of roles\">\r\n        <mat-option *ngIf=\"!form.get('roles').value || form.get('roles').value.indexOf(r.name)<0\" [value]=\"r.name\">\r\n          {{r.title || r.name}}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DesignerPrivilegesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-privileges', template: "<h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-chip-grid #chips [attr.aria-label]=\"''\">\r\n      <mat-chip-row *ngFor=\"let r of form.get('roles').value\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"remove(r)\">\r\n        {{titleOf(r)}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input [placeholder]=\"'Roles'|translate\"\r\n           [formControl]=search\r\n           #inputrole\r\n           [matAutocomplete]=\"nametype\"\r\n           [matChipInputFor]=\"chips\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #nametype=\"matAutocomplete\" (optionSelected)=\"add(inputrole, $event)\">\r\n      <ng-container *ngFor=\"let r of roles\">\r\n        <mat-option *ngIf=\"!form.get('roles').value || form.get('roles').value.indexOf(r.name)<0\" [value]=\"r.name\">\r\n          {{r.title || r.name}}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n" }]
+            args: [{ selector: 'bizdoc-designer-privileges', template: "<h2 class=\"mat-mdc-title\">{{'Privileges'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-chip-grid #chips [attr.aria-label]=\"''\">\r\n      <mat-chip-row *ngFor=\"let r of form.get('roles').value\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"remove(r)\">\r\n        {{titleOf(r)}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input [placeholder]=\"'Roles'|translate\"\r\n           [formControl]=search\r\n           #inputrole\r\n           [matAutocomplete]=\"nametype\"\r\n           [matChipInputFor]=\"chips\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #nametype=\"matAutocomplete\" (optionSelected)=\"add(inputrole, $event)\">\r\n      <ng-container *ngFor=\"let r of roles\">\r\n        <mat-option *ngIf=\"!form.get('roles').value || form.get('roles').value.indexOf(r.name)<0\" [value]=\"r.name\">\r\n          {{r.title || r.name}}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SystemService }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -32600,11 +32606,11 @@ class DesignerItemComponent {
         this._destroy?.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DesignerItemComponent, deps: [{ token: i0.ElementRef }, { token: i1.FormBuilder }, { token: i2$1.DomSanitizer }, { token: DesignerRef }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", view: "view", context: "context" }, outputs: { onContinue: "continue", back: "back", onSave: "save" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", view: "view", context: "context" }, outputs: { onContinue: "continue", back: "back", onSave: "save" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-mdc-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DesignerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-element', template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
+            args: [{ selector: 'bizdoc-designer-element', template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-mdc-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FormBuilder }, { type: i2$1.DomSanitizer }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -32809,11 +32815,11 @@ class ActionDesignerComponent extends DesignerTypeElementComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActionDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActionDesignerComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div>\r\n        <mat-checkbox formControlName=\"multiple\">{{'EnableMultipleSelection'|translate}}</mat-checkbox>\r\n      </div>\r\n      <h2 class=\"mat-title\">{{'Labels'|translate}}</h2>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"Past\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"verb\" [placeholder]=\"Verb\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjective\" [placeholder]=\"Adjective\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjectivePlural\" [placeholder]=\"AdjectivePlural\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"you\" [placeholder]=\"You\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <div>\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActionDesignerComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div>\r\n        <mat-checkbox formControlName=\"multiple\">{{'EnableMultipleSelection'|translate}}</mat-checkbox>\r\n      </div>\r\n      <h2 class=\"mat-mdc-title\">{{'Labels'|translate}}</h2>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"Past\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"verb\" [placeholder]=\"Verb\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjective\" [placeholder]=\"Adjective\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjectivePlural\" [placeholder]=\"AdjectivePlural\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"you\" [placeholder]=\"You\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <div>\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActionDesignerComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div>\r\n        <mat-checkbox formControlName=\"multiple\">{{'EnableMultipleSelection'|translate}}</mat-checkbox>\r\n      </div>\r\n      <h2 class=\"mat-title\">{{'Labels'|translate}}</h2>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"Past\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"verb\" [placeholder]=\"Verb\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjective\" [placeholder]=\"Adjective\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjectivePlural\" [placeholder]=\"AdjectivePlural\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"you\" [placeholder]=\"You\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <div>\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div>\r\n        <mat-checkbox formControlName=\"multiple\">{{'EnableMultipleSelection'|translate}}</mat-checkbox>\r\n      </div>\r\n      <h2 class=\"mat-mdc-title\">{{'Labels'|translate}}</h2>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"Past\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"verb\" [placeholder]=\"Verb\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjective\" [placeholder]=\"Adjective\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjectivePlural\" [placeholder]=\"AdjectivePlural\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"you\" [placeholder]=\"You\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <div>\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
 class AttributeDesignComponent extends DesignerTypeElementComponent {
@@ -32920,11 +32926,11 @@ class DesignerCubeFilterComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DesignerCubeFilterComponent, deps: [{ token: CubeService }, { token: DesignerRef }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: { cube: "cube", form: "form" }, usesOnChanges: true, ngImport: i0, template: "<h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngFor=\"let a of cube.axes\" [ngSwitch]=\"a.selectionMode\" [attr.data-help]=\"'axis-'+a.name\">\r\n    <ng-container *ngSwitchCase=\"'Pattern'\">\r\n      <input matInput autocomplete=\"off\"\r\n             [pattern]=\"pattern\" [autofocus]\r\n             [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'Search'\">\r\n      <input matInput autocomplete=\"off\" type=\"search\"\r\n             [matAutocomplete]=\"segment\" #inp\r\n             [placeholder]=\"a.title||a.name\" />\r\n      <mat-autocomplete #segment [displayWith]=\"display\"\r\n                        (optionSelected)=\"change(a.name, $event)\">\r\n        <mat-option *ngFor=\"let r of sources[a.name] | async | filter : 'value' : inp.value | slice:0:50\" [value]=\"r\">{{r.value}}</mat-option>\r\n      </mat-autocomplete>\r\n      <button mat-icon-button *ngIf=\"inp.value\" matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\" *ngSwitchDefault>\r\n      <mat-option *ngIf=\"a.selectionMode !== 'Multiple'\">{{'All' | translate}}</mat-option>\r\n      <mat-option *ngFor=\"let r of sources[a.name] | async\" [value]=\"r.key\">{{r.value}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: { cube: "cube", form: "form" }, usesOnChanges: true, ngImport: i0, template: "<h2 class=\"mat-mdc-title\">{{'Filters'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngFor=\"let a of cube.axes\" [ngSwitch]=\"a.selectionMode\" [attr.data-help]=\"'axis-'+a.name\">\r\n    <ng-container *ngSwitchCase=\"'Pattern'\">\r\n      <input matInput autocomplete=\"off\"\r\n             [pattern]=\"pattern\" [autofocus]\r\n             [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'Search'\">\r\n      <input matInput autocomplete=\"off\" type=\"search\"\r\n             [matAutocomplete]=\"segment\" #inp\r\n             [placeholder]=\"a.title||a.name\" />\r\n      <mat-autocomplete #segment [displayWith]=\"display\"\r\n                        (optionSelected)=\"change(a.name, $event)\">\r\n        <mat-option *ngFor=\"let r of sources[a.name] | async | filter : 'value' : inp.value | slice:0:50\" [value]=\"r\">{{r.value}}</mat-option>\r\n      </mat-autocomplete>\r\n      <button mat-icon-button *ngIf=\"inp.value\" matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\" *ngSwitchDefault>\r\n      <mat-option *ngIf=\"a.selectionMode !== 'Multiple'\">{{'All' | translate}}</mat-option>\r\n      <mat-option *ngFor=\"let r of sources[a.name] | async\" [value]=\"r.key\">{{r.value}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DesignerCubeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-cube-filter', template: "<h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngFor=\"let a of cube.axes\" [ngSwitch]=\"a.selectionMode\" [attr.data-help]=\"'axis-'+a.name\">\r\n    <ng-container *ngSwitchCase=\"'Pattern'\">\r\n      <input matInput autocomplete=\"off\"\r\n             [pattern]=\"pattern\" [autofocus]\r\n             [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'Search'\">\r\n      <input matInput autocomplete=\"off\" type=\"search\"\r\n             [matAutocomplete]=\"segment\" #inp\r\n             [placeholder]=\"a.title||a.name\" />\r\n      <mat-autocomplete #segment [displayWith]=\"display\"\r\n                        (optionSelected)=\"change(a.name, $event)\">\r\n        <mat-option *ngFor=\"let r of sources[a.name] | async | filter : 'value' : inp.value | slice:0:50\" [value]=\"r\">{{r.value}}</mat-option>\r\n      </mat-autocomplete>\r\n      <button mat-icon-button *ngIf=\"inp.value\" matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\" *ngSwitchDefault>\r\n      <mat-option *ngIf=\"a.selectionMode !== 'Multiple'\">{{'All' | translate}}</mat-option>\r\n      <mat-option *ngFor=\"let r of sources[a.name] | async\" [value]=\"r.key\">{{r.value}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["form{padding:8px}\n"] }]
+            args: [{ selector: 'bizdoc-designer-cube-filter', template: "<h2 class=\"mat-mdc-title\">{{'Filters'|translate}}</h2>\r\n<div [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngFor=\"let a of cube.axes\" [ngSwitch]=\"a.selectionMode\" [attr.data-help]=\"'axis-'+a.name\">\r\n    <ng-container *ngSwitchCase=\"'Pattern'\">\r\n      <input matInput autocomplete=\"off\"\r\n             [pattern]=\"pattern\" [autofocus]\r\n             [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'Search'\">\r\n      <input matInput autocomplete=\"off\" type=\"search\"\r\n             [matAutocomplete]=\"segment\" #inp\r\n             [placeholder]=\"a.title||a.name\" />\r\n      <mat-autocomplete #segment [displayWith]=\"display\"\r\n                        (optionSelected)=\"change(a.name, $event)\">\r\n        <mat-option *ngFor=\"let r of sources[a.name] | async | filter : 'value' : inp.value | slice:0:50\" [value]=\"r\">{{r.value}}</mat-option>\r\n      </mat-autocomplete>\r\n      <button mat-icon-button *ngIf=\"inp.value\" matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'AxisPatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\" *ngSwitchDefault>\r\n      <mat-option *ngIf=\"a.selectionMode !== 'Multiple'\">{{'All' | translate}}</mat-option>\r\n      <mat-option *ngFor=\"let r of sources[a.name] | async\" [value]=\"r.key\">{{r.value}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["form{padding:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: CubeService }, { type: DesignerRef }, { type: i1.FormBuilder }]; }, propDecorators: { cube: [{
                 type: Input
             }], form: [{
@@ -32977,7 +32983,6 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
                 this._service.cube(this.model.name).subscribe(r => {
                     this.jobInfo = r.jobInfo;
                     r.jobInfo && r.jobInfo.nextExecution && this._schedule(r.jobInfo.nextExecution);
-                    this.usage = r;
                 });
                 break;
             case 'edit':
@@ -33122,11 +33127,11 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CubeDesignComponent, deps: [{ token: i1.FormBuilder }, { token: SystemService }, { token: PromptService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CubeDesignComponent, selector: "ng-component", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n            <td class=\"mat-cell\">{{datatypeOf(a.dataType)}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n      <!--<div *ngIf=\"model.indices?.length\">\r\n        <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!--idx-->\r\n<ng-template #indexform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Pie\" [disabled]=\"form.get('series').value?.length>0\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\" [disabled]=\"form.get('series').value?.length>0\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\" [disabled]=\"form.get('series').value?.length>0\">{{'Pyramid'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Guide'|translate}}</mat-label>\r\n      <mat-select formControlName=\"guide\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </div>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\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 datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n        <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n          <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n        </mat-optgroup>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-mdc-radio-group p{margin-inline-start:8px}.mat-mdc-table{width:100%}.mat-mdc-table .mat-mdc-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{padding:0;margin:0;clear:both}dd{float:left;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CubeDesignComponent, selector: "ng-component", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-mdc-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-mdc-table\">\r\n          <tr class=\"mat-mdc-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-mdc-cell\">{{a.title}}</td>\r\n            <td class=\"mat-mdc-cell\">{{datatypeOf(a.dataType)}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n      <!--<div *ngIf=\"model.indices?.length\">\r\n        <h2 class=\"mat-mdc-title\">{{'Indices'|translate}}</h2>\r\n        <table class=\"mat-mdc-table\">\r\n          <tr class=\"mat-mdc-row\" *ngFor=\"let a of model.indices\">\r\n            <td class=\"mat-mdc-cell\">{{a.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-mdc-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!--idx-->\r\n<ng-template #indexform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Pie\" [disabled]=\"form.get('series').value?.length>0\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\" [disabled]=\"form.get('series').value?.length>0\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\" [disabled]=\"form.get('series').value?.length>0\">{{'Pyramid'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Guide'|translate}}</mat-label>\r\n      <mat-select formControlName=\"guide\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </div>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\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 datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n        <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n          <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n        </mat-optgroup>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-mdc-radio-group p{margin-inline-start:8px}.mat-mdc-table{width:100%}.mat-mdc-table .mat-mdc-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{padding:0;margin:0;clear:both}dd{float:left;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CubeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n            <td class=\"mat-cell\">{{datatypeOf(a.dataType)}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n      <!--<div *ngIf=\"model.indices?.length\">\r\n        <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!--idx-->\r\n<ng-template #indexform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Pie\" [disabled]=\"form.get('series').value?.length>0\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\" [disabled]=\"form.get('series').value?.length>0\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\" [disabled]=\"form.get('series').value?.length>0\">{{'Pyramid'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Guide'|translate}}</mat-label>\r\n      <mat-select formControlName=\"guide\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </div>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\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 datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n        <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n          <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n        </mat-optgroup>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-mdc-radio-group p{margin-inline-start:8px}.mat-mdc-table{width:100%}.mat-mdc-table .mat-mdc-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{padding:0;margin:0;clear:both}dd{float:left;padding:0;margin:0}\n"] }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-mdc-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-mdc-table\">\r\n          <tr class=\"mat-mdc-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-mdc-cell\">{{a.title}}</td>\r\n            <td class=\"mat-mdc-cell\">{{datatypeOf(a.dataType)}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n      <!--<div *ngIf=\"model.indices?.length\">\r\n        <h2 class=\"mat-mdc-title\">{{'Indices'|translate}}</h2>\r\n        <table class=\"mat-mdc-table\">\r\n          <tr class=\"mat-mdc-row\" *ngFor=\"let a of model.indices\">\r\n            <td class=\"mat-mdc-cell\">{{a.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-mdc-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!--idx-->\r\n<ng-template #indexform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Pie\" [disabled]=\"form.get('series').value?.length>0\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\" [disabled]=\"form.get('series').value?.length>0\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\" [disabled]=\"form.get('series').value?.length>0\">{{'Pyramid'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Guide'|translate}}</mat-label>\r\n      <mat-select formControlName=\"guide\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </div>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\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 datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n        <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n          <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n        </mat-optgroup>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-mdc-radio-group p{margin-inline-start:8px}.mat-mdc-table{width:100%}.mat-mdc-table .mat-mdc-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{padding:0;margin:0;clear:both}dd{float:left;padding:0;margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SystemService }, { type: PromptService }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -33168,11 +33173,11 @@ class FolderDesignComponent extends DesignerTypeElementComponent {
         this.cube = this.cubes.find(c => c.name === evt.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FolderDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: FolderDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <ng-container formGroupName=\"filters\" *ngIf=\"cubes.length\" class=\"column\">\r\n        <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n        <mat-form-field *ngIf=\"cubes.length>1\">\r\n          <mat-label>{{'Cube'|translate}}</mat-label>\r\n          <mat-select formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Axes'|translate}}</mat-label>\r\n          <mat-select formControlName=\"axes\" multiple>\r\n            <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Columns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(columns, newColumn(), 'Column', columnform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"columns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, columns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let c of columns.controls; index as index\" [formGroup]=\"c\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\" width=\"99%\">\r\n            {{c.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(c, 'Column', columnform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"columns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #columnform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required [matAutocomplete]=\"names\" />\r\n      <mat-autocomplete #names=\"matAutocomplete\" (optionSelected)=\"form.get('title').setValue($event.option.getLabel())\">\r\n        <mat-option value=\"number\">{{'Number'|translate}}</mat-option>\r\n        <mat-option value=\"subject\">{{'Subject'|translate}}</mat-option>\r\n        <mat-option value=\"value\">{{'Value'|translate}}</mat-option>\r\n        <mat-option value=\"owner\">{{'Owner'|translate}}</mat-option>\r\n        <mat-option value=\"sender\">{{'Sender'|translate}}</mat-option>\r\n        <mat-option value=\"received\">{{'Received'|translate}}</mat-option>\r\n        <mat-option value=\"receivedAgo\">{{'ReceivedAgo'|translate}}</mat-option>\r\n        <mat-option value=\"replied\">{{'Replied'|translate}}</mat-option>\r\n        <mat-option value=\"state\">{{'State'|translate}}</mat-option>\r\n        <mat-option value=\"issued\">{{'Issued'|translate}}</mat-option>\r\n        <mat-option value=\"issuedAgo\">{{'IssuedAgo'|translate}}</mat-option>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option [value]=\"c.name\" *ngFor=\"let c of controls\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: FolderDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <ng-container formGroupName=\"filters\" *ngIf=\"cubes.length\" class=\"column\">\r\n        <h2 class=\"mat-mdc-title\">{{'Filters'|translate}}</h2>\r\n        <mat-form-field *ngIf=\"cubes.length>1\">\r\n          <mat-label>{{'Cube'|translate}}</mat-label>\r\n          <mat-select formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Axes'|translate}}</mat-label>\r\n          <mat-select formControlName=\"axes\" multiple>\r\n            <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Columns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(columns, newColumn(), 'Column', columnform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"columns\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, columns)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let c of columns.controls; index as index\" [formGroup]=\"c\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{c.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(c, 'Column', columnform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"columns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #columnform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required [matAutocomplete]=\"names\" />\r\n      <mat-autocomplete #names=\"matAutocomplete\" (optionSelected)=\"form.get('title').setValue($event.option.getLabel())\">\r\n        <mat-option value=\"number\">{{'Number'|translate}}</mat-option>\r\n        <mat-option value=\"subject\">{{'Subject'|translate}}</mat-option>\r\n        <mat-option value=\"value\">{{'Value'|translate}}</mat-option>\r\n        <mat-option value=\"owner\">{{'Owner'|translate}}</mat-option>\r\n        <mat-option value=\"sender\">{{'Sender'|translate}}</mat-option>\r\n        <mat-option value=\"received\">{{'Received'|translate}}</mat-option>\r\n        <mat-option value=\"receivedAgo\">{{'ReceivedAgo'|translate}}</mat-option>\r\n        <mat-option value=\"replied\">{{'Replied'|translate}}</mat-option>\r\n        <mat-option value=\"state\">{{'State'|translate}}</mat-option>\r\n        <mat-option value=\"issued\">{{'Issued'|translate}}</mat-option>\r\n        <mat-option value=\"issuedAgo\">{{'IssuedAgo'|translate}}</mat-option>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option [value]=\"c.name\" *ngFor=\"let c of controls\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FolderDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <ng-container formGroupName=\"filters\" *ngIf=\"cubes.length\" class=\"column\">\r\n        <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n        <mat-form-field *ngIf=\"cubes.length>1\">\r\n          <mat-label>{{'Cube'|translate}}</mat-label>\r\n          <mat-select formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Axes'|translate}}</mat-label>\r\n          <mat-select formControlName=\"axes\" multiple>\r\n            <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Columns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(columns, newColumn(), 'Column', columnform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"columns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, columns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let c of columns.controls; index as index\" [formGroup]=\"c\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\" width=\"99%\">\r\n            {{c.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(c, 'Column', columnform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"columns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #columnform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required [matAutocomplete]=\"names\" />\r\n      <mat-autocomplete #names=\"matAutocomplete\" (optionSelected)=\"form.get('title').setValue($event.option.getLabel())\">\r\n        <mat-option value=\"number\">{{'Number'|translate}}</mat-option>\r\n        <mat-option value=\"subject\">{{'Subject'|translate}}</mat-option>\r\n        <mat-option value=\"value\">{{'Value'|translate}}</mat-option>\r\n        <mat-option value=\"owner\">{{'Owner'|translate}}</mat-option>\r\n        <mat-option value=\"sender\">{{'Sender'|translate}}</mat-option>\r\n        <mat-option value=\"received\">{{'Received'|translate}}</mat-option>\r\n        <mat-option value=\"receivedAgo\">{{'ReceivedAgo'|translate}}</mat-option>\r\n        <mat-option value=\"replied\">{{'Replied'|translate}}</mat-option>\r\n        <mat-option value=\"state\">{{'State'|translate}}</mat-option>\r\n        <mat-option value=\"issued\">{{'Issued'|translate}}</mat-option>\r\n        <mat-option value=\"issuedAgo\">{{'IssuedAgo'|translate}}</mat-option>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option [value]=\"c.name\" *ngFor=\"let c of controls\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <ng-container formGroupName=\"filters\" *ngIf=\"cubes.length\" class=\"column\">\r\n        <h2 class=\"mat-mdc-title\">{{'Filters'|translate}}</h2>\r\n        <mat-form-field *ngIf=\"cubes.length>1\">\r\n          <mat-label>{{'Cube'|translate}}</mat-label>\r\n          <mat-select formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Axes'|translate}}</mat-label>\r\n          <mat-select formControlName=\"axes\" multiple>\r\n            <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Columns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(columns, newColumn(), 'Column', columnform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"columns\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, columns)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let c of columns.controls; index as index\" [formGroup]=\"c\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{c.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(c, 'Column', columnform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"columns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #columnform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required [matAutocomplete]=\"names\" />\r\n      <mat-autocomplete #names=\"matAutocomplete\" (optionSelected)=\"form.get('title').setValue($event.option.getLabel())\">\r\n        <mat-option value=\"number\">{{'Number'|translate}}</mat-option>\r\n        <mat-option value=\"subject\">{{'Subject'|translate}}</mat-option>\r\n        <mat-option value=\"value\">{{'Value'|translate}}</mat-option>\r\n        <mat-option value=\"owner\">{{'Owner'|translate}}</mat-option>\r\n        <mat-option value=\"sender\">{{'Sender'|translate}}</mat-option>\r\n        <mat-option value=\"received\">{{'Received'|translate}}</mat-option>\r\n        <mat-option value=\"receivedAgo\">{{'ReceivedAgo'|translate}}</mat-option>\r\n        <mat-option value=\"replied\">{{'Replied'|translate}}</mat-option>\r\n        <mat-option value=\"state\">{{'State'|translate}}</mat-option>\r\n        <mat-option value=\"issued\">{{'Issued'|translate}}</mat-option>\r\n        <mat-option value=\"issuedAgo\">{{'IssuedAgo'|translate}}</mat-option>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option [value]=\"c.name\" *ngFor=\"let c of controls\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
         }] });
 
 class FormInviteDialog {
@@ -33396,11 +33401,11 @@ class FormDesignComponent extends DesignerTypeElementComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FormDesignComponent, deps: [{ token: i1.FormBuilder }, { token: PanesRouter }, { token: SystemService }, { token: SessionService }, { token: i0.Injector }, { token: TranslateService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cubes.length\">\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      <!--Rules-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', ruleform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let r of rules.controls; index as index\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\" width=\"99%\">\r\n            {{r.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', ruleform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #ruleform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i12.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cubes.length\">\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      <!--Rules-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', ruleform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let r of rules.controls; index as index\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{r.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', ruleform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #ruleform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i12.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FormDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cubes.length\">\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      <!--Rules-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', ruleform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let r of rules.controls; index as index\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\" width=\"99%\">\r\n            {{r.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', ruleform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #ruleform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cubes.length\">\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      <!--Rules-->\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', ruleform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let r of rules.controls; index as index\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{r.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', ruleform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #ruleform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: PanesRouter }, { type: SystemService }, { type: SessionService }, { type: i0.Injector }, { type: TranslateService }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -33437,11 +33442,11 @@ class GuideDesignComponent extends DesignerTypeElementComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: GuideDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: GuideDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Steps'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(steps, newStep(), 'Step', stepform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"steps\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, steps)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{s.get('title').value || s.get('content').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(s, 'Step', stepform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"steps.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #stepform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Content'|translate}}</mat-label>\r\n      <input matInput formControlName=\"content\" required />\r\n      <mat-error *ngIf=\"form.get('content').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Content'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Selector'|translate}}</mat-label>\r\n      <input matInput formControlName=\"selector\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Position'|translate}}</mat-label>\r\n      <mat-select formControlName=\"position\">\r\n        <mat-option value=\"Above\">{{'Above'|translate}}</mat-option>\r\n        <mat-option value=\"Start\">{{'Start'|translate}}</mat-option>\r\n        <mat-option value=\"End\">{{'End'|translate}}</mat-option>\r\n        <mat-option value=\"Below\">{{'Below'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-checkbox formControlName=\"execute\">{{'Execute'|translate}}</mat-checkbox>\r\n    <!--privileges-->\r\n    <bizdoc-designer-privileges [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: GuideDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Steps'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(steps, newStep(), 'Step', stepform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"steps\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, steps)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" width=\"99%\">\r\n            {{s.get('title').value || s.get('content').value }}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(s, 'Step', stepform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"steps.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #stepform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Content'|translate}}</mat-label>\r\n      <input matInput formControlName=\"content\" required />\r\n      <mat-error *ngIf=\"form.get('content').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Content'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Selector'|translate}}</mat-label>\r\n      <input matInput formControlName=\"selector\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Position'|translate}}</mat-label>\r\n      <mat-select formControlName=\"position\">\r\n        <mat-option value=\"Above\">{{'Above'|translate}}</mat-option>\r\n        <mat-option value=\"Start\">{{'Start'|translate}}</mat-option>\r\n        <mat-option value=\"End\">{{'End'|translate}}</mat-option>\r\n        <mat-option value=\"Below\">{{'Below'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-checkbox formControlName=\"execute\">{{'Execute'|translate}}</mat-checkbox>\r\n    <!--privileges-->\r\n    <bizdoc-designer-privileges [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: GuideDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Steps'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(steps, newStep(), 'Step', stepform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"steps\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, steps)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{s.get('title').value || s.get('content').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(s, 'Step', stepform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"steps.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #stepform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Content'|translate}}</mat-label>\r\n      <input matInput formControlName=\"content\" required />\r\n      <mat-error *ngIf=\"form.get('content').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Content'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Selector'|translate}}</mat-label>\r\n      <input matInput formControlName=\"selector\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Position'|translate}}</mat-label>\r\n      <mat-select formControlName=\"position\">\r\n        <mat-option value=\"Above\">{{'Above'|translate}}</mat-option>\r\n        <mat-option value=\"Start\">{{'Start'|translate}}</mat-option>\r\n        <mat-option value=\"End\">{{'End'|translate}}</mat-option>\r\n        <mat-option value=\"Below\">{{'Below'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-checkbox formControlName=\"execute\">{{'Execute'|translate}}</mat-checkbox>\r\n    <!--privileges-->\r\n    <bizdoc-designer-privileges [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  </form>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Steps'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(steps, newStep(), 'Step', stepform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"steps\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, steps)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" width=\"99%\">\r\n            {{s.get('title').value || s.get('content').value }}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(s, 'Step', stepform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"steps.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #stepform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Content'|translate}}</mat-label>\r\n      <input matInput formControlName=\"content\" required />\r\n      <mat-error *ngIf=\"form.get('content').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Content'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Selector'|translate}}</mat-label>\r\n      <input matInput formControlName=\"selector\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Position'|translate}}</mat-label>\r\n      <mat-select formControlName=\"position\">\r\n        <mat-option value=\"Above\">{{'Above'|translate}}</mat-option>\r\n        <mat-option value=\"Start\">{{'Start'|translate}}</mat-option>\r\n        <mat-option value=\"End\">{{'End'|translate}}</mat-option>\r\n        <mat-option value=\"Below\">{{'Below'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-checkbox formControlName=\"execute\">{{'Execute'|translate}}</mat-checkbox>\r\n    <!--privileges-->\r\n    <bizdoc-designer-privileges [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  </form>\r\n</ng-template>\r\n" }]
         }] });
 
 class NodeDesignerComponent extends DesignerTypeElementComponent {
@@ -33606,11 +33611,11 @@ class TypeDesignComponent extends DesignerTypeElementComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TypeDesignComponent, deps: [{ token: i1.FormBuilder }, { token: DatasourceService }, { token: TranslateService }, { token: PromptService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\" type=\"button\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"tpatterns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-checkbox formControlName=\"assignable\">{{'Assignable'|translate}}</mat-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.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: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\" type=\"button\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"tpatterns\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-checkbox formControlName=\"assignable\">{{'Assignable'|translate}}</mat-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.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: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TypeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\" type=\"button\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"tpatterns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-checkbox formControlName=\"assignable\">{{'Assignable'|translate}}</mat-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\" type=\"button\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-mdc-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"tpatterns\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-mdc-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-checkbox formControlName=\"assignable\">{{'Assignable'|translate}}</mat-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: DatasourceService }, { type: TranslateService }, { type: PromptService }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -33662,6 +33667,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
+class JobDesignComponent extends DesignerTypeElementComponent {
+    constructor(fb, _service, _ps, element, ref) {
+        super(fb, element, ref);
+        this._service = _service;
+        this._ps = _ps;
+        this.form = this._fb.group({});
+        this.working = false;
+    }
+    ngOnInit() {
+        switch (this.mode) {
+            case 'widget':
+                this._service.job(this.model.name).subscribe(r => {
+                    this.jobInfo = r.jobInfo;
+                });
+                break;
+            case 'edit':
+                break;
+        }
+        super.ngOnInit();
+    }
+    execute() {
+        this.working = true;
+        this._service.execute(this.model.name).subscribe({
+            next: e => {
+                this.jobInfo = e;
+                this.working = false;
+            }, error: () => {
+                this.working = false;
+                this._ps.error();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: JobDesignComponent, deps: [{ token: i1.FormBuilder }, { token: SystemService }, { token: PromptService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: JobDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"execute()\" [disabled]=\"model.draft || working\">\r\n        <span> {{'Execute'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"working\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-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: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: JobDesignComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"execute()\" [disabled]=\"model.draft || working\">\r\n        <span> {{'Execute'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"working\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SystemService }, { type: PromptService }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
+                    type: Inject,
+                    args: [DesignerRef]
+                }] }]; } });
+
 const CHARACTER = /[\w]|Spacebar/;
 /** */
 let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
@@ -33688,6 +33736,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
                 { elements: r.views, type: 'Views', comp: ViewDesignComponent, templates: r.tViews },
                 { elements: r.guides, type: 'Guides', comp: GuideDesignComponent, templates: [{ title: this._translate.get('Guide') }] },
                 { elements: r.cubes, type: 'Cubes', comp: CubeDesignComponent, templates: r.tCubes },
+                { elements: r.jobs, type: 'Jobs', comp: JobDesignComponent, templates: r.tCubes },
                 { elements: r.folders, type: 'Folders', comp: FolderDesignComponent, templates: [{ title: this._translate.get('Folder') }] },
                 { elements: r.roles, type: 'Roles', comp: RoleDesignComponent, templates: [{ title: this._translate.get('Role') }] },
                 { elements: r.states, type: 'States', comp: StateDesignComponent, templates: [{ title: this._translate.get('State') }] },
@@ -33895,14 +33944,14 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfigurationDesignerComponent, deps: [{ token: PanesRouter }, { token: TranslateService }, { token: PromptService }, { token: SessionService }, { token: i0.ElementRef }, { token: i0.Injector }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfigurationDesignerComponent, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "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  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$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: "component", type: i8$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i8$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfigurationDesignerComponent, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "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  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-mdc-title\">{{s.type | translate}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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: i3$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: "component", type: i8$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i8$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] }); }
 };
 ConfigurationDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-designer' })
 ], ConfigurationDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfigurationDesignerComponent, decorators: [{
             type: Component,
-            args: [{ animations: [itemAnimation], host: { tabindex: '0' }, 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  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"] }]
+            args: [{ animations: [itemAnimation], host: { tabindex: '0' }, 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  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-mdc-title\">{{s.type | translate}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: PanesRouter }, { type: TranslateService }, { type: PromptService }, { type: SessionService }, { type: i0.ElementRef }, { type: i0.Injector }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -34311,14 +34360,14 @@ let FormDesignerComponent = class FormDesignerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FormDesignerComponent, deps: [{ token: i1.FormBuilder }, { token: PaneRef }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: SystemService }, { token: TranslateService }, { token: PanesRouter }, { token: SessionService }, { token: i0.ElementRef }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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]=\"!form.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 class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of 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          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\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>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</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]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\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>\r\n      <div class=\"tools 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)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\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}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row: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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: "component", type: DesignControlComponent, selector: "bizdoc-box-control-design", inputs: ["metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", 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]=\"!form.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 class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of 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          <h2 class=\"mat-mdc-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\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>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</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]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\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>\r\n      <div class=\"tools 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)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\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}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row: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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-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: "component", type: DesignControlComponent, selector: "bizdoc-box-control-design", inputs: ["metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FormDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-form-designer' })
 ], FormDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FormDesignerComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.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 class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of 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          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\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>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</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]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\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>\r\n      <div class=\"tools 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)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\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}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
+            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.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 class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of 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          <h2 class=\"mat-mdc-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\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>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</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]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\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>\r\n      <div class=\"tools 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)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\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}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row: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: i1.FormBuilder }, { type: PaneRef }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: SystemService }, { type: TranslateService }, { type: PanesRouter }, { type: SessionService }, { type: i0.ElementRef }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -34424,14 +34473,14 @@ let MatrixViewDesignComponent = class MatrixViewDesignComponent extends Designer
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: MatrixViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <ng-container *ngIf=\"view; else main\">\r\n    <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n    <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n      <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n    </div>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required>\r\n          <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value !== a.name && form.get('series').value !== a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n        <mat-select formControlName=\"aggregate\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name && form.get('series').value !== a.name && form.get('filters').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <table class=\"mat-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <tr class=\"mat-row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <td class=\"mat-cell\">\r\n          <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        </td>\r\n        <td class=\"mat-cell\">{{s.get('title').value}}</td>\r\n        <td class=\"mat-cell\">\r\n          <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n          <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n    <button mat-icon-button (click)=\"add(sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n  </form>\r\n</ng-template>\r\n<ng-template #sumform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-radio-group formControlName=\"axis\">\r\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field>\r\n      <mat-label>{{'Calculate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"calculate\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <ng-container *ngIf=\"view; else main\">\r\n    <h2 class=\"mat-mdc-title\">{{context.title|translate}}</h2>\r\n    <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n      <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n    </div>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required>\r\n          <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value !== a.name && form.get('series').value !== a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n        <mat-select formControlName=\"aggregate\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name && form.get('series').value !== a.name && form.get('filters').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n    <h2 class=\"mat-mdc-title\">{{'Summary'|translate}}</h2>\r\n    <table class=\"mat-mdc-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <tr class=\"mat-mdc-row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <td class=\"mat-mdc-cell\">\r\n          <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        </td>\r\n        <td class=\"mat-mdc-cell\">{{s.get('title').value}}</td>\r\n        <td class=\"mat-mdc-cell\">\r\n          <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n          <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n    <button mat-icon-button (click)=\"add(sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n  </form>\r\n</ng-template>\r\n<ng-template #sumform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-radio-group formControlName=\"axis\">\r\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field>\r\n      <mat-label>{{'Calculate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"calculate\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 MatrixViewDesignComponent = __decorate([
     BizDoc({ selector: 'matrix-view-designer' })
 ], MatrixViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: MatrixViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <ng-container *ngIf=\"view; else main\">\r\n    <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n    <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n      <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n    </div>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required>\r\n          <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value !== a.name && form.get('series').value !== a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n        <mat-select formControlName=\"aggregate\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name && form.get('series').value !== a.name && form.get('filters').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <table class=\"mat-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <tr class=\"mat-row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <td class=\"mat-cell\">\r\n          <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        </td>\r\n        <td class=\"mat-cell\">{{s.get('title').value}}</td>\r\n        <td class=\"mat-cell\">\r\n          <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n          <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n    <button mat-icon-button (click)=\"add(sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n  </form>\r\n</ng-template>\r\n<ng-template #sumform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-radio-group formControlName=\"axis\">\r\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field>\r\n      <mat-label>{{'Calculate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"calculate\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <ng-container *ngIf=\"view; else main\">\r\n    <h2 class=\"mat-mdc-title\">{{context.title|translate}}</h2>\r\n    <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n      <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n    </div>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required>\r\n          <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value !== a.name && form.get('series').value !== a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n        <mat-select formControlName=\"aggregate\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name && form.get('series').value !== a.name && form.get('filters').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n    <h2 class=\"mat-mdc-title\">{{'Summary'|translate}}</h2>\r\n    <table class=\"mat-mdc-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <tr class=\"mat-mdc-row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <td class=\"mat-mdc-cell\">\r\n          <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        </td>\r\n        <td class=\"mat-mdc-cell\">{{s.get('title').value}}</td>\r\n        <td class=\"mat-mdc-cell\">\r\n          <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n          <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n    <button mat-icon-button (click)=\"add(sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n  </form>\r\n</ng-template>\r\n<ng-template #sumform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-radio-group formControlName=\"axis\">\r\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field>\r\n      <mat-label>{{'Calculate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"calculate\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
         }] });
 
 let ChartViewDesignComponent = class ChartViewDesignComponent extends DesignerCubeElementComponent {
@@ -34830,14 +34879,14 @@ let ConfigurationDatasourceDesignComponent = class ConfigurationDatasourceDesign
         this._tomap(this.items.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfigurationDatasourceDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfigurationDatasourceDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title row\">\r\n      {{'Items'|translate}}\r\n      <span class=divider></span>\r\n      <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n    </h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n          <bizdoc-localized-string [placeholder]=\"'Value'|translate\" formControlName=\"value\" required class=\"row\"></bizdoc-localized-string>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ConfigurationDatasourceDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-mdc-title row\">\r\n      {{'Items'|translate}}\r\n      <span class=divider></span>\r\n      <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n    </h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n          <bizdoc-localized-string [placeholder]=\"'Value'|translate\" formControlName=\"value\" required class=\"row\"></bizdoc-localized-string>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$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: i3$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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ConfigurationDatasourceDesignComponent = __decorate([
     BizDoc({ selector: 'configuration-datasource-designer' })
 ], ConfigurationDatasourceDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ConfigurationDatasourceDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title row\">\r\n      {{'Items'|translate}}\r\n      <span class=divider></span>\r\n      <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n    </h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n          <bizdoc-localized-string [placeholder]=\"'Value'|translate\" formControlName=\"value\" required class=\"row\"></bizdoc-localized-string>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-mdc-title row\">\r\n      {{'Items'|translate}}\r\n      <span class=divider></span>\r\n      <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n    </h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n          <bizdoc-localized-string [placeholder]=\"'Value'|translate\" formControlName=\"value\" required class=\"row\"></bizdoc-localized-string>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n" }]
         }] });
 
 let CubeIndexDesignComponent = class CubeIndexDesignComponent extends DesignerCubeElementComponent {
@@ -34993,6 +35042,7 @@ class SystemModule {
         registerComponents(DESINER_COMPONENTS);
         TranslateService.set({
             en: {
+                Jobs: 'Jobs',
                 FieldN: 'Field {0}',
                 SectionN: 'Section {0}',
                 Prefix: 'Prefix',
@@ -35188,6 +35238,7 @@ class SystemModule {
                 Key: 'Key',
             },
             he: {
+                Jobs: 'משימות',
                 Key: 'ערך',
                 Assignable: 'בר מינוי',
                 Month: 'חודשי',
@@ -35356,7 +35407,7 @@ class SystemModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.9", ngImport: i0, type: SystemModule, declarations: [
             /** design */
             FormInviteDialog, PerformanceReportDesignComponent, NodeDesignerComponent, DesignerPrivilegesComponent, AddContentDirective, IconPickerComponent, EditContentDirective, WidgetContentDirective,
-            DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
+            DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
             DesignerCubeFilterComponent, CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
             LocalizedStringField,
             /** utilities */
@@ -35401,7 +35452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                     declarations: [
                         /** design */
                         FormInviteDialog, PerformanceReportDesignComponent, NodeDesignerComponent, DesignerPrivilegesComponent, AddContentDirective, IconPickerComponent, EditContentDirective, WidgetContentDirective,
-                        DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
+                        DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
                         DesignerCubeFilterComponent, CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
                         LocalizedStringField,
                         /** utilities */