@bizdoc/core 1.15.5 → 1.15.6

package/fesm2015/bizdoc-core.mjs

@@ -26,7 +26,7 @@ import * as i1$4 from '@angular/common';
 import { registerLocaleData, CommonModule, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol, formatNumber, formatPercent, formatCurrency } from '@angular/common';
 import * as i5 from '@angular/flex-layout/flex';
 import * as i9 from '@angular/material/button';
-import { MatButtonModule, MatButton } from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { L10n, setCulture, loadCldr, setCurrencyCode, Internationalization, enableRtl, registerLicense } from '@syncfusion/ej2-base';
 import 'dayjs/locale/he';
 import 'dayjs/locale/de';
@@ -110,7 +110,7 @@ import * as i4$5 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i8$3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i6$5 from '@angular/material/radio';
+import * as i4$6 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i2$4 from '@angular/flex-layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -478,11 +478,16 @@ function mapToArray(map) {
 function isImage(contentType) {
     return IMAGE_TYPE.indexOf(contentType) > -1;
 }
-function cleanup(params) {
+function cleanup$1(params) {
     Object.keys(params).forEach(k => {
         const val = params[k];
         if (val === null || val === undefined || (isArray(val) && !val.length))
             delete params[k];
+        else if (isObject(val)) {
+            cleanup$1(val);
+            if (!Object.keys(val).length)
+                delete params[k];
+        }
     });
     return params;
 }
@@ -1188,6 +1193,7 @@ const STRINGS = {
     'ar': {},
     'ru': {},
     'en': {
+        Summary: 'Summary',
         SecurityLevel: 'Security level',
         Global: 'Global',
         Indices: 'Indices',
@@ -3450,7 +3456,7 @@ class MailboxService {
     }
     findAll(filter, options) {
         const params = Object.assign(Object.assign({}, filter), options);
-        cleanup(params);
+        cleanup$1(params);
         return this._http.get('/api/mail', { params });
     }
     create(form) {
@@ -3502,7 +3508,7 @@ class MailboxService {
         //        return throwError({ status: res.status, error: res.body });
         //    }))
         //  }), this._notify<T>());
-        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}`, model, { params })), this._notify());
+        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}`, cleanup$1(model), { params })), this._notify());
     }
     delete(id) {
         return this._http.delete(`/api/mail/${id}`).pipe(tap(() => this._delete$.next(id)));
@@ -7304,10 +7310,10 @@ class CubeFilterComponent {
     }
 }
 CubeFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeFilterComponent, deps: [{ token: CubeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.FormBuilder }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-CubeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: { cube: "cube", exclude: "exclude", include: "include", axes: "axes" }, outputs: { axesChange: "axesChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" fxLayout=\"column\">\r\n  <mat-form-field *ngFor=\"let a of visibleAxes\" [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\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'SimplePatternErr' |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\" />\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\">{{'SimplePatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title\" [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</form>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
+CubeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: { cube: "cube", exclude: "exclude", include: "include", axes: "axes" }, outputs: { axesChange: "axesChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" fxLayout=\"column\">\r\n  <mat-form-field *ngFor=\"let a of visibleAxes\" [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\">{{'SimplePatternErr' |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\">{{'SimplePatternErr' |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</form>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-cube-filter', template: "<form [formGroup]=\"form\" fxLayout=\"column\">\r\n  <mat-form-field *ngFor=\"let a of visibleAxes\" [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\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'SimplePatternErr' |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\" />\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\">{{'SimplePatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title\" [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</form>\r\n", styles: ["form{padding:8px}\n"] }]
+            args: [{ selector: 'bizdoc-cube-filter', template: "<form [formGroup]=\"form\" fxLayout=\"column\">\r\n  <mat-form-field *ngFor=\"let a of visibleAxes\" [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\">{{'SimplePatternErr' |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\">{{'SimplePatternErr' |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</form>\r\n", styles: ["form{padding:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: CubeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.FormBuilder }, { type: SessionService }]; }, propDecorators: { cube: [{
                 type: Input
             }], exclude: [{
@@ -7353,7 +7359,7 @@ class BrowseFilterComponent {
                 pipe(debounceTime(250), filter(v => isString(v)), takeUntil(this._destroy), switchMap(v => this._mailbox.senders(v)));
         this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(FILTER_DEBOUNCE)).subscribe(v => {
             const value = Object.assign({}, v);
-            cleanup(value);
+            cleanup$1(value);
             this.valuesChange.emit(value);
         });
         this._initialize();
@@ -7404,7 +7410,7 @@ class BrowseFilterComponent {
     }
     axesChange(axes) {
         const value = Object.assign(Object.assign({}, this.form.value), axes);
-        cleanup(value);
+        cleanup$1(value);
         this.valuesChange.emit(value);
     }
     toggleTag(tag) {
@@ -8660,12 +8666,17 @@ function assign(model1, model2) {
 }
 
 class FormRef {
-    constructor( /*private _router: RouterImpl*/) {
+    constructor(/*private _router: RouterImpl*/ _configuration) {
+        this._configuration = _configuration;
         this._saving = new Subject();
         this._stateChange = new Subject();
         this._modelChange = new Subject();
         this._navigating = new Subject();
     }
+    /** configuration options */
+    get options() {
+        return this._configuration.options || {};
+    }
     /** intercept save */
     get saving() {
         return this._saving.asObservable();
@@ -8966,7 +8977,7 @@ class ComposeFormComponent {
         if (!this.form.template)
             throw (`Form '${this.form.name}' model missing '[Template()]' attribute.`);
         const factory = this._cf.resolve(this.form.template);
-        this._formRef = new FormRef();
+        this._formRef = new FormRef(this.form);
         this._formRef._navigating.
             subscribe(p => this.page = p);
         this._formRef._stateChange.pipe(startWith()).
@@ -13175,7 +13186,7 @@ class ReportArgumentsComponent {
         form.patchValue(this.args, { emitEvent: false });
         form.valueChanges.pipe(debounceTime(ARGUMENTS_DEBOUNCE), takeUntil(this._destroy)).subscribe(c => {
             if (form.valid) {
-                cleanup(c);
+                cleanup$1(c);
                 this.args = c;
                 this.argsChange.emit(c);
             }
@@ -13391,7 +13402,7 @@ class WorkflowNodeComponent {
                         connector.addInfo = this.connector.getRawValue();
                     else
                         Object.assign(connector.addInfo, this.connector.getRawValue());
-                    cleanup(connector.addInfo);
+                    cleanup$1(connector.addInfo);
                     if (connector.annotations.length) {
                         connector.annotations[0].content = content;
                         this.diagram.dataBind();
@@ -13433,7 +13444,7 @@ class WorkflowNodeComponent {
                                     }]);
                         }
                         Object.assign(addInfo, m);
-                        cleanup(addInfo);
+                        cleanup$1(addInfo);
                         this.change.emit();
                     }
                     if (tool.template) {
@@ -13574,8 +13585,8 @@ function paletteIconClick() {
 /** workflow component*/
 class WorkflowComponent {
     /** workflow ctor */
-    constructor(ps, _service, _pane, _router, _session, _translate) {
-        this.ps = ps;
+    constructor(_ps, _service, _pane, _router, _session, _translate) {
+        this._ps = _ps;
         this._service = _service;
         this._pane = _pane;
         this._router = _router;
@@ -14068,9 +14079,9 @@ class WorkflowComponent {
         this._form.workflow.nodes = obj.nodes.filter(n => n.id !== 'version');
         this.saving = true;
         return this._service.save(this._form).toPromise().then(v => {
-            this.ps.toast('ChangesSaved');
+            this._ps.toast('ChangesSaved');
             if (this._form.workflow.version < v) {
-                this.ps.toast('DiagramVersion', v);
+                this._ps.toast('DiagramVersion', v);
                 const node = this.diagram.getNodeObject('version');
                 node.shape.content = this._translate.get('DiagramVersion', v);
                 this.diagram.dataBind();
@@ -14079,7 +14090,7 @@ class WorkflowComponent {
             this.dirty = false;
             this.saving = false;
         }, () => {
-            this.ps.error();
+            this._ps.error();
             this.saving = false;
         });
     }
@@ -15400,7 +15411,7 @@ class VersionCompareComponent {
         const componentFactory = this._cf.resolve(this._form.template);
         const injector = Injector.create([
             { provide: VersionCompareComponent, useValue: this },
-            { provide: FormRef, useValue: new FormRef() },
+            { provide: FormRef, useValue: new FormRef(this._form) },
             { provide: DOCUMENT_MODEL, useValue: this.model }
         ], this._injector);
         this._container.clear();
@@ -17816,7 +17827,7 @@ class DocumentInfoComponent {
     ngOnChanges(_) {
         const form = this._session.profile.forms.find(f => f.name === this.model.formId);
         this._formRef && this._formRef._destroy();
-        this._formRef = new FormRef();
+        this._formRef = new FormRef(form);
         const factory = this._cf.resolve(form.template);
         const injector = Injector.create([{
                 provide: DOCUMENT_MODEL, useValue: this.model
@@ -20063,10 +20074,10 @@ class ComposeMenuComponent {
     }
 }
 ComposeMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ComposeMenuComponent, deps: [{ token: SessionService }, { token: MailboxService }, { token: PromptService }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component });
-ComposeMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: { change: "change" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n      <!--<mat-spinner radius=\"25\" *ngIf=\"creating===f.name\"></mat-spinner>-->\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [] });
+ComposeMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: { change: "change" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon || 'description'}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n      <!--<mat-spinner radius=\"25\" *ngIf=\"creating===f.name\"></mat-spinner>-->\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ComposeMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-new-menu', animations: [], template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n      <!--<mat-spinner radius=\"25\" *ngIf=\"creating===f.name\"></mat-spinner>-->\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"] }]
+            args: [{ selector: 'bizdoc-new-menu', animations: [], template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon || 'description'}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n      <!--<mat-spinner radius=\"25\" *ngIf=\"creating===f.name\"></mat-spinner>-->\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: MailboxService }, { type: PromptService }, { type: PanesRouter }]; }, propDecorators: { change: [{
                 type: Output
             }] } });
@@ -20357,10 +20368,10 @@ class FormSelectorSheet {
     }
 }
 FormSelectorSheet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormSelectorSheet, deps: [{ token: i2$3.MatDialog }, { token: i2$5.MatBottomSheetRef }, { token: PromptService }, { token: MailboxService }, { token: i1$3.Router }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-FormSelectorSheet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormSelectorSheet, selector: "bizdoc-form-selector", ngImport: i0, template: "<mat-nav-list role=\"list\">\r\n  <a mat-list-item role=\"listitem\" *ngFor=\"let f of forms\" (click)=\"open(f.name)\">\r\n    <div matLine>{{f.title}}</div>\r\n    <mat-icon>{{f.icon}}</mat-icon>\r\n  </a>\r\n  <mat-divider></mat-divider>\r\n  <a mat-list-item role=\"listitem\" (click)=\"copy($event)\">\r\n    <div matLine>{{'Elipsis'| translate: ('Copy' | translate)}}</div>\r\n  </a>\r\n</mat-nav-list>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormSelectorSheet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormSelectorSheet, selector: "bizdoc-form-selector", ngImport: i0, template: "<mat-nav-list role=\"list\">\r\n  <a mat-list-item role=\"listitem\" *ngFor=\"let f of forms\" (click)=\"open(f.name)\">\r\n    <div matLine>{{f.title}}</div>\r\n    <mat-icon>{{f.icon || 'description'}}</mat-icon>\r\n  </a>\r\n  <mat-divider></mat-divider>\r\n  <a mat-list-item role=\"listitem\" (click)=\"copy($event)\">\r\n    <div matLine>{{'Elipsis'| translate: ('Copy' | translate)}}</div>\r\n  </a>\r\n</mat-nav-list>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormSelectorSheet, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-form-selector', template: "<mat-nav-list role=\"list\">\r\n  <a mat-list-item role=\"listitem\" *ngFor=\"let f of forms\" (click)=\"open(f.name)\">\r\n    <div matLine>{{f.title}}</div>\r\n    <mat-icon>{{f.icon}}</mat-icon>\r\n  </a>\r\n  <mat-divider></mat-divider>\r\n  <a mat-list-item role=\"listitem\" (click)=\"copy($event)\">\r\n    <div matLine>{{'Elipsis'| translate: ('Copy' | translate)}}</div>\r\n  </a>\r\n</mat-nav-list>\r\n" }]
+            args: [{ selector: 'bizdoc-form-selector', template: "<mat-nav-list role=\"list\">\r\n  <a mat-list-item role=\"listitem\" *ngFor=\"let f of forms\" (click)=\"open(f.name)\">\r\n    <div matLine>{{f.title}}</div>\r\n    <mat-icon>{{f.icon || 'description'}}</mat-icon>\r\n  </a>\r\n  <mat-divider></mat-divider>\r\n  <a mat-list-item role=\"listitem\" (click)=\"copy($event)\">\r\n    <div matLine>{{'Elipsis'| translate: ('Copy' | translate)}}</div>\r\n  </a>\r\n</mat-nav-list>\r\n" }]
         }], ctorParameters: function () { return [{ type: i2$3.MatDialog }, { type: i2$5.MatBottomSheetRef }, { type: PromptService }, { type: MailboxService }, { type: i1$3.Router }, { type: SessionService }]; } });
 
 class ChatComponent {
@@ -24853,7 +24864,6 @@ class ColorPicker {
         this.Object = Object;
         this._required = false;
         this._disabled = false;
-        this._opened = false;
         this.stateChanges = new Subject();
         this.valueChanges = new Subject();
         this.id = `color-picker-${ColorPicker.nextId++}`;
@@ -24899,7 +24909,7 @@ class ColorPicker {
     }
     get disabled() { return this._disabled; }
     set disabled(value) {
-        this._trigger.disabled = this._disabled = value;
+        this._disabled = value;
         this.stateChanges.next();
     }
     setDescribedByIds(ids) {
@@ -24907,21 +24917,20 @@ class ColorPicker {
     }
     onContainerClick(_event) {
         this._onTouched && this._onTouched();
-        !this._opened && this.open();
+        this.open();
     }
     ngOnDestroy() {
         this._destroy.next();
+        this._destroy.complete();
     }
     open() {
         if (!this._overlayRef)
             this._overlayRef = this._createOverlay();
         const portal = new TemplatePortal(this._colorPalette, this._vc);
         this._overlayRef.attach(portal);
-        this._opened = true;
     }
     close() {
         this._overlayRef.detach();
-        this._opened = false;
     }
     _pick(color) {
         this.value = color;
@@ -24950,34 +24959,14 @@ class ColorPicker {
 }
 ColorPicker.nextId = 0;
 ColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i3$3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
-ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ColorPicker, selector: "bizdoc-color-picker", inputs: { label: "label", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: MatButton, descendants: true, static: true }, { propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<button mat-button (click)='open()'>
-<span>{{label}}</span>
-      <mat-icon>arrow_drop_down</mat-icon>
-    </button>
-<ng-template>
-  <div class="color-palette">
-    <div *ngFor='let p of Object.keys(_palettes)' class="color-container">
-      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class="color-item"></span>
-    </div>
-  </div>
-</ng-template>`, isInline: true, styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ColorPicker, selector: "bizdoc-color-picker", inputs: { label: "label", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-color-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], template: `<button mat-button (click)='open()'>
-<span>{{label}}</span>
-      <mat-icon>arrow_drop_down</mat-icon>
-    </button>
-<ng-template>
-  <div class="color-palette">
-    <div *ngFor='let p of Object.keys(_palettes)' class="color-container">
-      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class="color-item"></span>
-    </div>
-  </div>
-</ng-template>`, host: {
+            args: [{ selector: 'bizdoc-color-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], host: {
                         '[class.floating]': 'shouldLabelFloat',
                         '[id]': 'id',
                         '[attr.aria-describedby]': 'describedBy'
-                    }, styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"] }]
+                    }, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i2$1.NgControl, decorators: [{
                         type: Optional
@@ -24986,6 +24975,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     }] }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i3$3.Directionality }];
     }, propDecorators: { label: [{
                 type: Input
+            }], value: [{
+                type: Input
             }], valueChanges: [{
                 type: Output
             }], id: [{
@@ -25000,9 +24991,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
             }], describedBy: [{
                 type: HostBinding,
                 args: ['attr.aria-describedby']
-            }], _trigger: [{
-                type: ViewChild,
-                args: [MatButton, { static: true }]
             }], _colorPalette: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
@@ -27772,12 +27760,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: ['nameInput', { static: true, read: ElementRef }]
             }] } });
 
+let BoxFormComponent = class BoxFormComponent {
+    constructor(_fb, ref) {
+        this._fb = _fb;
+        this.metadata = ref.options;
+        const content = this._fb.group({});
+        this.form = _fb.group({ content });
+        this.metadata.sections.forEach(s => {
+            const group = _fb.group({});
+            s.rows.forEach(r => r.fields.forEach(f => group.addControl(f.name, _fb.control(null, f.required ? Validators.required : null))));
+            content.addControl(s.name, group);
+        });
+    }
+    onBind(data, version) {
+        this.data = data;
+    }
+};
+BoxFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BoxFormComponent, deps: [{ token: i2$1.FormBuilder }, { token: FormRef }], target: i0.ɵɵFactoryTarget.Component });
+BoxFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: BoxFormComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <section *ngFor=\"let s of metadata.sections\" [formGroupName]=\"s.name\">\r\n    <div *ngFor=\"let r of s.rows\" fxLayout=\"row\">\r\n      <ng-container *ngFor=\"let f of r.fields\" [ngSwitch]=\"f.kind\">\r\n        <mat-form-field *ngSwitchCase=\"'Select'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <bizdoc-select [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Date'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput\r\n                 [formControlName]=\"f.name\"\r\n                 [required]=\"f.required\"\r\n                 [min]=\"f.min\"\r\n                 [max]=\"f.max\"\r\n                 [matDatepicker]=\"picker\" />\r\n          <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #picker></mat-datepicker>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Text'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <textarea matInput [formControl]=control cdkTextareaAutosize\r\n                    [formControlName]=\"f.name\"\r\n                    [required]=\"field.required\" [minlength]=\"field.min\" [maxlength]=\"field.max\"></textarea>\r\n        </mat-form-field>\r\n        <mat-checkbox [formControlName]=\"f.name\" *ngSwitchCase=\"'Checkbox'\">{{f.label}}</mat-checkbox>\r\n        <mat-slide-toggle [formControlName]=\"f.name\" *ngSwitchCase=\"'Switch'\">{{f.label}}</mat-slide-toggle>\r\n        <mat-form-field appearance=\"outline\" fxFlex *ngSwitchDefault>\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput [required]=\"f.required\" [formControlName]=\"f.name\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</form>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }] });
+BoxFormComponent = __decorate([
+    BizDoc({ selector: 'bizdoc-box-form' })
+], BoxFormComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BoxFormComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <section *ngFor=\"let s of metadata.sections\" [formGroupName]=\"s.name\">\r\n    <div *ngFor=\"let r of s.rows\" fxLayout=\"row\">\r\n      <ng-container *ngFor=\"let f of r.fields\" [ngSwitch]=\"f.kind\">\r\n        <mat-form-field *ngSwitchCase=\"'Select'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <bizdoc-select [type]=\"f.dataType\" [formControlName]=\"f.name\" [required]=\"f.required\"></bizdoc-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Date'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput\r\n                 [formControlName]=\"f.name\"\r\n                 [required]=\"f.required\"\r\n                 [min]=\"f.min\"\r\n                 [max]=\"f.max\"\r\n                 [matDatepicker]=\"picker\" />\r\n          <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #picker></mat-datepicker>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Text'\" appearance=\"outline\">\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <textarea matInput [formControl]=control cdkTextareaAutosize\r\n                    [formControlName]=\"f.name\"\r\n                    [required]=\"field.required\" [minlength]=\"field.min\" [maxlength]=\"field.max\"></textarea>\r\n        </mat-form-field>\r\n        <mat-checkbox [formControlName]=\"f.name\" *ngSwitchCase=\"'Checkbox'\">{{f.label}}</mat-checkbox>\r\n        <mat-slide-toggle [formControlName]=\"f.name\" *ngSwitchCase=\"'Switch'\">{{f.label}}</mat-slide-toggle>\r\n        <mat-form-field appearance=\"outline\" fxFlex *ngSwitchDefault>\r\n          <mat-label>{{f.label}}</mat-label>\r\n          <input matInput [required]=\"f.required\" [formControlName]=\"f.name\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</form>\r\n", styles: ["form{padding:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: FormRef }]; } });
+
 /** configuration componenets */
 const CORE_COMPONENTS = [CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
     ActionsWidget, CubeAnalysisWidget, CubeDocumentsWidget, RecentsWidget, PersonalActivityWidget,
     CompareGroupsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
-    CubeDocumentsComponent, TasksComponent, UsageReportArgs, CubeUsageComponent
+    CubeDocumentsComponent, TasksComponent, UsageReportArgs, CubeUsageComponent, BoxFormComponent
 ];
 /** common BizDoc components */
 class SharedModule {
@@ -27808,7 +27822,7 @@ class SharedModule {
     }
 }
 SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: SharedModule, declarations: [HelpTipComponent,
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: SharedModule, declarations: [HelpTipComponent, BoxFormComponent,
         CubeUsageComponent,
         CubeDocumentsComponent,
         DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
@@ -27976,7 +27990,7 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [HelpTipComponent,
+                    declarations: [HelpTipComponent, BoxFormComponent,
                         CubeUsageComponent,
                         CubeDocumentsComponent,
                         DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
@@ -30665,6 +30679,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: ['window:keydown.f1', ['$event']]
             }] } });
 
+//export const ICONS = ['10k', '10k', '10mp', '10mp', '11mp', '11mp', '123', '123', '12mp', '12mp', '13mp', '13mp', '14mp', '14mp', '15mp', '15mp', '16mp', '16mp', '17mp', '17mp', '18_up_rating', '18_up_rating', '18mp', '18mp', '19mp', '19mp', '1k', '1k', '1k_plus', '1k_plus', '1x_mobiledata', '1x_mobiledata', '20mp', '20mp', '21mp', '21mp', '22mp', '22mp', '23mp', '23mp', '24mp', '24mp', '2k', '2k', '2k_plus', '2k_plus', '2mp', '2mp', '30fps', '30fps', '30fps_select', '30fps_select', '360', '360', '3d_rotation', '3d_rotation', '3g_mobiledata', '3g_mobiledata', '3k', '3k', '3k_plus', '3k_plus', '3mp', '3mp', '3p', '3p', '4g_mobiledata', '4g_mobiledata', '4g_plus_mobiledata', '4g_plus_mobiledata', '4k', '4k', '4k_plus', '4k_plus',
+//  '4mp', '4mp', '5g', '5g', '5k', '5k', '5k_plus', '5k_plus', '5mp', '5mp', '60fps', '60fps', '60fps_select', '60fps_select', '6_ft_apart', '6_ft_apart', '6k', '6k', '6k_plus', '6k_plus', '6mp', '6mp', '7k', '7k', '7k_plus', '7k_plus', '7mp', '7mp', '8k', '8k', '8k_plus', '8k_plus', '8mp', '8mp', '9k', '9k', '9k_plus', '9k_plus', '9mp', '9mp', 'abc', 'abc', 'ac_unit', 'ac_unit', 'access_alarm', 'access_alarms', 'access_time', 'access_time_filled', 'accessibility', 'accessibility', 'accessibility_new', 'accessibility_new', 'accessible', 'accessible', 'accessible_forward', 'accessible_forward', 'account_balance', 'account_balance', 'account_balance_wallet', 'account_balance_wallet', 'account_box', 'account_box', 'account_circle', 'account_circle', 'account_tree', 'account_tree', 'activity_zone', 'ad_units', 'ad_units', 'adb', 'adb', 'add', 'add', 'add_a_photo', 'add_a_photo', 'add_alarm', 'add_alert', 'add_alert', 'add_box', 'add_box', 'add_business', 'add_business', 'add_call', 'add_call', 'add_card', 'add_card', 'add_chart', 'add_chart', 'add_circle', 'add_circle', 'add_circle_outline', 'add_comment', 'add_comment', 'add_home', 'add_home', 'add_home_work', 'add_home_work', 'add_ic_call', 'add_link', 'add_link', 'add_location', 'add_location', 'add_location_alt', 'add_location_alt', 'add_moderator', 'add_moderator', 'add_photo_alternate', 'add_photo_alternate', 'add_reaction', 'add_reaction', 'add_road', 'add_road', 'add_shopping_cart', 'add_shopping_cart', 'add_task', 'add_task', 'add_to_drive', 'add_to_drive', 'add_to_home_screen', 'add_to_home_screen', 'add_to_photos', 'add_to_photos', 'add_to_queue', 'add_to_queue', 'addchart', 'adf_scanner', 'adf_scanner', 'adjust', 'adjust', 'admin_panel_settings', 'admin_panel_settings', 'ads_click', 'ads_click', 'agender', 'agriculture', 'agriculture', 'air', 'air', 'air_freshener', 'air_purifier_gen', 'airline_seat_flat', 'airline_seat_flat', 'airline_seat_flat_angled', 'airline_seat_flat_angled', 'airline_seat_individual_suite', 'airline_seat_individual_suite', 'airline_seat_legroom_extra', 'airline_seat_legroom_extra', 'airline_seat_legroom_normal', 'airline_seat_legroom_normal', 'airline_seat_legroom_reduced', 'airline_seat_legroom_reduced', 'airline_seat_recline_extra', 'airline_seat_recline_extra', 'airline_seat_recline_normal', 'airline_seat_recline_normal', 'airline_stops', 'airline_stops', 'airlines', 'airlines', 'airplane_ticket', 'airplane_ticket', 'airplanemode_active', 'airplanemode_active', 'airplanemode_inactive', 'airplanemode_inactive', 'airplay', 'airplay', 'airport_shuttle', 'airport_shuttle', 'airware', 'airwave', 'alarm', 'alarm', 'alarm_add', 'alarm_add', 'alarm_off', 'alarm_off', 'alarm_on', 'alarm_on', 'album', 'album', 'align_horizontal_center', 'align_horizontal_center', 'align_horizontal_left', 'align_horizontal_left', 'align_horizontal_right', 'align_horizontal_right', 'align_vertical_bottom', 'align_vertical_bottom', 'align_vertical_center', 'align_vertical_center', 'align_vertical_top', 'align_vertical_top', 'all_inbox', 'all_inbox', 'all_inclusive', 'all_inclusive', 'all_out', 'all_out', 'alt_route', 'alt_route', 'alternate_email', 'alternate_email', 'amp_stories', 'analytics', 'analytics', 'anchor', 'anchor', 'android', 'android', 'animation', 'animation', 'announcement', 'aod', 'aod', 'aod_tablet', 'apartment', 'apartment', 'api', 'api', 'apk_document', 'apk_install', 'app_blocking', 'app_blocking', 'app_registration', 'app_registration', 'app_settings_alt', 'app_shortcut', 'app_shortcut', 'approval', 'approval', 'apps', 'apps', 'apps_outage', 'apps_outage', 'architecture', 'architecture', 'archive', 'archive', 'area_chart', 'area_chart', 'arming_countdown', 'arrow_back', 'arrow_back', 'arrow_back_ios', 'arrow_back_ios', 'arrow_back_ios_new', 'arrow_back_ios_new', 'arrow_circle_down', 'arrow_circle_down', 'arrow_circle_left', 'arrow_circle_left', 'arrow_circle_right', 'arrow_circle_right', 'arrow_circle_up', 'arrow_circle_up', 'arrow_downward', 'arrow_downward', 'arrow_drop_down', 'arrow_drop_down', 'arrow_drop_down_circle', 'arrow_drop_down_circle', 'arrow_drop_up', 'arrow_drop_up', 'arrow_forward', 'arrow_forward', 'arrow_forward_ios', 'arrow_forward_ios', 'arrow_left', 'arrow_left', 'arrow_outward', 'arrow_outward', 'arrow_right', 'arrow_right', 'arrow_right_alt', 'arrow_right_alt', 'arrow_upward', 'arrow_upward', 'arrows_more_down', 'arrows_more_up', 'art_track', 'art_track', 'article', 'article', 'aspect_ratio', 'aspect_ratio', 'assessment', 'assignment', 'assignment', 'assignment_ind', 'assignment_ind', 'assignment_late', 'assignment_late', 'assignment_return', 'assignment_return', 'assignment_returned', 'assignment_returned', 'assignment_turned_in', 'assignment_turned_in', 'assist_walker', 'assist_walker', 'assistant', 'assistant', 'assistant_direction', 'assistant_direction', 'assistant_navigation', 'assistant_navigation', 'assistant_photo', 'assured_workload', 'assured_workload', 'astrophotography_auto', 'astrophotography_off', 'atm', 'atm', 'atr', 'attach_email', 'attach_email', 'attach_file', 'attach_file', 'attach_money', 'attach_money', 'attachment', 'attachment', 'attractions', 'attractions', 'attribution', 'attribution', 'audio_file', 'audio_file', 'audiotrack', 'auto_activity_zone', 'auto_awesome', 'auto_awesome', 'auto_awesome_mosaic', 'auto_awesome_mosaic', 'auto_awesome_motion', 'auto_awesome_motion', 'auto_delete', 'auto_delete', 'auto_fix_high', 'auto_fix_normal', 'auto_fix_off', 'auto_graph', 'auto_graph', 'auto_mode', 'auto_mode', 'auto_read_pause', 'auto_read_play', 'auto_schedule', 'auto_stories', 'auto_stories', 'autofps_select', 'autofps_select', 'autorenew', 'autorenew', 'av_timer', 'av_timer', 'baby_changing_station', 'baby_changing_station', 'back_hand', 'back_hand', 'background_replace', 'backpack', 'backpack', 'backspace', 'backspace', 'backup', 'backup', 'backup_table', 'backup_table', 'badge', 'badge', 'badge_critical_battery', 'bakery_dining', 'bakery_dining', 'balance', 'balance', 'balcony', 'balcony', 'ballot', 'ballot', 'bar_chart', 'bar_chart', 'barcode', 'barcode_scanner', 'batch_prediction', 'batch_prediction', 'bathroom', 'bathroom', 'bathtub', 'bathtub', 'battery_0_bar', 'battery_0_bar', 'battery_1_bar', 'battery_1_bar', 'battery_20', 'battery_20', 'battery_2_bar', 'battery_2_bar', 'battery_30', 'battery_30', 'battery_3_bar', 'battery_3_bar', 'battery_4_bar', 'battery_4_bar', 'battery_50', 'battery_50', 'battery_5_bar', 'battery_5_bar', 'battery_60', 'battery_60', 'battery_6_bar', 'battery_6_bar', 'battery_80', 'battery_80', 'battery_90', 'battery_90', 'battery_alert', 'battery_alert', 'battery_charging_20', 'battery_charging_20', 'battery_charging_30', 'battery_charging_30', 'battery_charging_50', 'battery_charging_50', 'battery_charging_60', 'battery_charging_60', 'battery_charging_80', 'battery_charging_80', 'battery_charging_90', 'battery_charging_90', 'battery_charging_full', 'battery_charging_full', 'battery_full', 'battery_full', 'battery_full_alt', 'battery_horiz_000', 'battery_horiz_050', 'battery_horiz_075', 'battery_low', 'battery_profile', 'battery_saver', 'battery_saver', 'battery_std', 'battery_unknown', 'battery_unknown', 'battery_vert_005', 'battery_vert_020', 'battery_vert_050', 'battery_very_low', 'beach_access', 'beach_access', 'bed', 'bed', 'bedroom_baby', 'bedroom_baby', 'bedroom_child', 'bedroom_child', 'bedroom_parent', 'bedroom_parent', 'bedtime', 'bedtime', 'bedtime_off', 'bedtime_off', 'beenhere', 'beenhere', 'bento', 'bento', 'bike_scooter', 'bike_scooter', 'biotech', 'biotech', 'blanket', 'blender', 'blender', 'blind', 'blind', 'blinds', 'blinds', 'blinds_closed', 'blinds_closed', 'block', 'block', 'block_flipped', 'bloodtype', 'bloodtype', 'bluetooth', 'bluetooth', 'bluetooth_audio', 'bluetooth_connected', 'bluetooth_connected', 'bluetooth_disabled', 'bluetooth_disabled', 'bluetooth_drive', 'bluetooth_drive', 'bluetooth_searching', 'bluetooth_searching', 'blur_circular', 'blur_circular', 'blur_linear', 'blur_linear', 'blur_medium', 'blur_off', 'blur_off', 'blur_on', 'blur_on', 'blur_short', 'bolt', 'bolt', 'book', 'book', 'book_online', 'book_online', 'bookmark', 'bookmark', 'bookmark_add', 'bookmark_add', 'bookmark_added', 'bookmark_added', 'bookmark_border', 'bookmark_remove', 'bookmark_remove', 'bookmarks', 'bookmarks', 'border_all', 'border_all', 'border_bottom', 'border_bottom', 'border_clear', 'border_clear', 'border_color', 'border_color', 'border_horizontal', 'border_horizontal', 'border_inner', 'border_inner', 'border_left', 'border_left', 'border_outer', 'border_outer', 'border_right', 'border_right', 'border_style', 'border_style', 'border_top', 'border_top', 'border_vertical', 'border_vertical', 'boy', 'boy', 'branding_watermark', 'branding_watermark', 'breakfast_dining', 'breakfast_dining', 'breaking_news_alt_1', 'brightness_1', 'brightness_1', 'brightness_2', 'brightness_2', 'brightness_3', 'brightness_3', 'brightness_4', 'brightness_4', 'brightness_5', 'brightness_5', 'brightness_6', 'brightness_6', 'brightness_7', 'brightness_7', 'brightness_auto', 'brightness_auto', 'brightness_high', 'brightness_high', 'brightness_low', 'brightness_low', 'brightness_medium', 'brightness_medium', 'bring_your_own_ip', 'broadcast_on_home', 'broadcast_on_home', 'broadcast_on_personal', 'broadcast_on_personal', 'broken_image', 'broken_image', 'browse_activity', 'browse_gallery', 'browse_gallery', 'browser_not_supported', 'browser_updated', 'browser_updated', 'brunch_dining', 'brunch_dining', 'brush', 'brush', 'bubble_chart', 'bubble_chart', 'bug_report', 'bug_report', 'build', 'build', 'build_circle', 'build_circle', 'bungalow', 'bungalow', 'burst_mode', 'burst_mode', 'bus_alert', 'bus_alert', 'business', 'business_center', 'business_center', 'cabin', 'cabin', 'cable', 'cable', 'cached', 'cached', 'cake', 'cake', 'calculate', 'calculate', 'calendar_add_on', 'calendar_apps_script', 'calendar_month', 'calendar_month', 'calendar_today', 'calendar_today', 'calendar_view_day', 'calendar_view_day', 'calendar_view_month', 'calendar_view_month', 'calendar_view_week', 'calendar_view_week', 'call', 'call', 'call_end', 'call_end', 'call_made', 'call_made', 'call_merge', 'call_merge', 'call_missed', 'call_missed', 'call_missed_outgoing', 'call_missed_outgoing', 'call_received', 'call_received', 'call_split', 'call_split', 'call_to_action', 'call_to_action', 'camera', 'camera', 'camera_alt', 'camera_enhance', 'camera_enhance', 'camera_front', 'camera_front', 'camera_indoor', 'camera_indoor', 'camera_outdoor', 'camera_outdoor', 'camera_rear', 'camera_rear', 'camera_roll', 'camera_roll', 'cameraswitch', 'cameraswitch', 'campaign', 'campaign', 'camping', 'cancel', 'cancel', 'cancel_presentation', 'cancel_presentation', 'cancel_schedule_send', 'cancel_schedule_send', 'candlestick_chart', 'candlestick_chart', 'car_crash', 'car_crash', 'car_rental', 'car_rental', 'car_repair', 'car_repair', 'card_giftcard', 'card_membership', 'card_membership', 'card_travel', 'card_travel', 'carpenter', 'carpenter', 'cases', 'cases', 'casino', 'casino', 'cast', 'cast', 'cast_connected', 'cast_connected', 'cast_for_education', 'cast_for_education', 'castle', 'castle', 'catching_pokemon', 'category', 'category', 'celebration', 'celebration', 'cell_tower', 'cell_tower', 'cell_wifi', 'cell_wifi', 'center_focus_strong', 'center_focus_strong', 'center_focus_weak', 'center_focus_weak', 'chair', 'chair', 'chair_alt', 'chair_alt', 'chalet', 'chalet', 'change_circle', 'change_circle', 'change_history', 'change_history', 'charger', 'charging_station', 'charging_station', 'chat', 'chat', 'chat_add_on', 'chat_apps_script', 'chat_bubble', 'chat_bubble', 'chat_bubble_outline', 'check', 'check', 'check_box', 'check_box', 'check_box_outline_blank', 'check_box_outline_blank', 'check_circle', 'check_circle', 'check_circle_outline', 'check_indeterminate_small', 'check_small', 'checklist', 'checklist', 'checklist_rtl', 'checklist_rtl', 'checkroom', 'checkroom', 'chevron_left', 'chevron_left', 'chevron_right', 'chevron_right', 'child_care', 'child_care', 'child_friendly', 'child_friendly', 'chrome_reader_mode', 'chrome_reader_mode', 'chromecast_2', 'chromecast_device', 'church', 'church', 'circle', 'circle', 'circle_notifications', 'circle_notifications', 'clarify', 'class', 'clean_hands', 'clean_hands', 'cleaning_bucket', 'cleaning_services', 'cleaning_services', 'clear', 'clear_all', 'clear_all', 'clear_day', 'clear_night', 'climate_mini_split', 'close', 'close', 'close_fullscreen', 'close_fullscreen', 'closed_caption', 'closed_caption', 'closed_caption_disabled', 'closed_caption_disabled', 'closed_caption_off', 'cloud', 'cloud', 'cloud_circle', 'cloud_circle', 'cloud_done', 'cloud_done', 'cloud_download', 'cloud_download', 'cloud_off', 'cloud_off', 'cloud_queue', 'cloud_queue', 'cloud_sync', 'cloud_sync', 'cloud_upload', 'cloud_upload', 'cloudy', 'cloudy_filled', 'cloudy_snowing', 'cloudy_snowing', 'co2', 'co2', 'co_present', 'co_present', 'code', 'code', 'code_off', 'code_off', 'coffee', 'coffee', 'coffee_maker', 'coffee_maker', 'collections', 'collections_bookmark', 'collections_bookmark', 'color_lens', 'colorize', 'colorize', 'comment', 'comment', 'comment_bank', 'comment_bank', 'comments_disabled', 'comments_disabled', 'commit', 'commit', 'communication', 'commute', 'commute', 'compare', 'compare', 'compare_arrows', 'compare_arrows', 'compass_calibration', 'compass_calibration', 'component_exchange', 'compost', 'compost', 'compress', 'compress', 'computer', 'computer', 'confirmation_number', 'confirmation_number', 'connect_without_contact', 'connect_without_contact', 'connected_tv', 'connected_tv', 'connecting_airports', 'connecting_airports', 'construction', 'construction', 'contact_emergency', 'contact_emergency', 'contact_mail', 'contact_mail', 'contact_page', 'contact_page', 'contact_phone', 'contact_phone', 'contact_support', 'contact_support', 'contactless', 'contactless', 'contacts', 'contacts', 'content_copy', 'content_copy', 'content_cut', 'content_cut', 'content_paste', 'content_paste', 'content_paste_go', 'content_paste_go', 'content_paste_off', 'content_paste_off', 'content_paste_search', 'content_paste_search', 'contrast', 'contrast', 'control_camera', 'control_camera', 'control_point', 'control_point_duplicate', 'control_point_duplicate', 'controller_gen', 'conversion_path', 'cookie', 'cookie', 'cooking', 'cool_to_dry', 'copy_all', 'copy_all', 'copyright', 'copyright', 'coronavirus', 'coronavirus', 'corporate_fare', 'corporate_fare', 'cottage', 'cottage', 'countertops', 'countertops', 'create', 'create_new_folder', 'create_new_folder', 'credit_card', 'credit_card', 'credit_card_off', 'credit_card_off', 'credit_score', 'credit_score', 'crib', 'crib', 'crisis_alert', 'crisis_alert', 'crop', 'crop', 'crop_16_9', 'crop_16_9', 'crop_3_2', 'crop_3_2', 'crop_5_4', 'crop_5_4', 'crop_7_5', 'crop_7_5', 'crop_din', 'crop_free', 'crop_free', 'crop_landscape', 'crop_landscape', 'crop_original', 'crop_portrait', 'crop_portrait', 'crop_rotate', 'crop_rotate', 'crop_square', 'crop_square', 'cruelty_free', 'cruelty_free', 'css', 'css', 'currency_bitcoin', 'currency_bitcoin', 'currency_exchange', 'currency_exchange', 'currency_franc', 'currency_franc', 'currency_lira', 'currency_lira', 'currency_pound', 'currency_pound', 'currency_ruble', 'currency_ruble', 'currency_rupee', 'currency_rupee', 'currency_yen', 'currency_yen', 'currency_yuan', 'currency_yuan', 'curtains', 'curtains', 'curtains_closed', 'curtains_closed', 'cut', 'cyclone', 'cyclone', 'dangerous', 'dangerous', 'dark_mode', 'dark_mode', 'dashboard', 'dashboard', 'dashboard_customize', 'dashboard_customize', 'data_array', 'data_array', 'data_exploration', 'data_exploration', 'data_object', 'data_object', 'data_saver_off', 'data_saver_on', 'data_saver_on', 'data_thresholding', 'data_thresholding', 'data_usage', 'data_usage', 'database', 'dataset', 'dataset', 'dataset_linked', 'dataset_linked', 'date_range', 'date_range', 'deblur', 'deblur', 'deck', 'deck', 'dehaze', 'dehaze', 'delete', 'delete', 'delete_forever', 'delete_forever', 'delete_outline', 'delete_sweep', 'delete_sweep', 'delivery_dining', 'density_large', 'density_large', 'density_medium', 'density_medium', 'density_small', 'density_small', 'dentistry', 'departure_board', 'departure_board', 'description', 'description', 'deselect', 'deselect', 'design_services', 'design_services', 'desk', 'desk', 'desktop_access_disabled', 'desktop_access_disabled', 'desktop_mac', 'desktop_mac', 'desktop_windows', 'desktop_windows', 'details', 'details', 'detection_and_zone', 'detector', 'detector_alarm', 'detector_battery', 'detector_co', 'detector_offline', 'detector_smoke', 'detector_status', 'developer_board', 'developer_board', 'developer_board_off', 'developer_board_off', 'developer_mode', 'developer_mode', 'device_hub', 'device_hub', 'device_reset', 'device_thermostat', 'device_thermostat', 'device_unknown', 'device_unknown', 'devices', 'devices', 'devices_fold', 'devices_fold', 'devices_other', 'devices_other', 'dew_point', 'dialer_sip', 'dialer_sip', 'dialpad', 'dialpad', 'diamond', 'diamond', 'difference', 'difference', 'digital_out_of_home', 'dining', 'dining', 'dinner_dining', 'dinner_dining', 'directions', 'directions', 'directions_alt', 'directions_alt_off', 'directions_bike', 'directions_bike', 'directions_boat', 'directions_boat', 'directions_boat_filled', 'directions_bus', 'directions_bus', 'directions_bus_filled', 'directions_car', 'directions_car', 'directions_car_filled', 'directions_off', 'directions_off', 'directions_railway', 'directions_railway', 'directions_railway_filled', 'directions_run', 'directions_run', 'directions_subway', 'directions_subway', 'directions_subway_filled', 'directions_transit', 'directions_transit_filled', 'directions_walk', 'directions_walk', 'dirty_lens', 'dirty_lens', 'disabled_by_default', 'disabled_by_default', 'disabled_visible', 'disabled_visible', 'disc_full', 'disc_full', 'discount', 'discover_tune', 'dishwasher_gen', 'display_settings', 'display_settings', 'diversity_1', 'diversity_1', 'diversity_2', 'diversity_2', 'diversity_3', 'diversity_3', 'dns', 'dns', 'do_disturb', 'do_disturb_alt', 'do_disturb_off', 'do_disturb_on', 'do_not_disturb', 'do_not_disturb_alt', 'do_not_disturb_off', 'do_not_disturb_off', 'do_not_disturb_on', 'do_not_disturb_on', 'do_not_disturb_on_total_silence', 'do_not_disturb_on_total_silence', 'do_not_step', 'do_not_step', 'do_not_touch', 'do_not_touch', 'dock', 'dock', 'docs_add_on', 'docs_apps_script', 'document_scanner', 'document_scanner', 'domain', 'domain', 'domain_add', 'domain_add', 'domain_disabled', 'domain_disabled', 'domain_verification', 'domain_verification', 'done', 'done', 'done_all', 'done_all', 'done_outline', 'done_outline', 'donut_large', 'donut_large', 'donut_small', 'donut_small', 'door_back', 'door_back', 'door_front', 'door_front', 'door_open', 'door_sensor', 'door_sliding', 'door_sliding', 'doorbell', 'doorbell', 'doorbell_3p', 'doorbell_chime', 'double_arrow', 'double_arrow', 'downhill_skiing', 'downhill_skiing', 'download', 'download', 'download_done', 'download_done', 'download_for_offline', 'download_for_offline', 'downloading', 'downloading', 'draft', 'drafts', 'drafts', 'drag_handle', 'drag_handle', 'drag_indicator', 'drag_indicator', 'draw', 'draw', 'dresser', 'drive_eta', 'drive_file_move', 'drive_file_move', 'drive_file_move_outline', 'drive_file_move_outline', 'drive_file_move_rtl', 'drive_file_move_rtl', 'drive_file_rename_outline', 'drive_file_rename_outline', 'drive_folder_upload', 'drive_folder_upload', 'dry', 'dry', 'dry_cleaning', 'dry_cleaning', 'duo', 'duo', 'dvr', 'dvr', 'dynamic_feed', 'dynamic_feed', 'dynamic_form', 'dynamic_form', 'e911_avatar', 'e911_emergency', 'e_mobiledata', 'e_mobiledata', 'earbuds', 'earbuds', 'earbuds_battery', 'earbuds_battery', 'early_on', 'east', 'east', 'eco', 'edgesensor_high', 'edgesensor_high', 'edgesensor_low', 'edgesensor_low', 'edit', 'edit', 'edit_attributes', 'edit_attributes', 'edit_calendar', 'edit_calendar', 'edit_document', 'edit_document', 'edit_location', 'edit_location', 'edit_location_alt', 'edit_location_alt', 'edit_note', 'edit_note', 'edit_notifications', 'edit_notifications', 'edit_off', 'edit_off', 'edit_road', 'edit_road', 'edit_square', 'edit_square', 'egg', 'egg', 'egg_alt', 'egg_alt', 'eject', 'eject', 'elderly', 'elderly', 'elderly_woman', 'elderly_woman', 'electric_bike', 'electric_bike', 'electric_bolt', 'electric_bolt', 'electric_car', 'electric_car', 'electric_meter', 'electric_meter', 'electric_moped', 'electric_moped', 'electric_rickshaw', 'electric_rickshaw', 'electric_scooter', 'electric_scooter', 'electrical_services', 'electrical_services', 'elevator', 'elevator', 'email', 'emergency', 'emergency', 'emergency_heat', 'emergency_home', 'emergency_recording', 'emergency_recording', 'emergency_share', 'emergency_share', 'emoji_emotions', 'emoji_events', 'emoji_flags', 'emoji_food_beverage', 'emoji_food_beverage', 'emoji_nature', 'emoji_nature', 'emoji_objects', 'emoji_objects', 'emoji_people', 'emoji_people', 'emoji_symbols', 'emoji_symbols', 'emoji_transportation', 'emoji_transportation', 'enable', 'energy_program_saving', 'energy_program_time_used', 'energy_savings_leaf', 'energy_savings_leaf', 'engineering', 'engineering', 'enhanced_encryption', 'enhanced_encryption', 'equalizer', 'equalizer', 'error', 'error', 'error_circle_rounded', 'error_outline', 'escalator', 'escalator', 'escalator_warning', 'escalator_warning', 'euro', 'euro', 'euro_symbol', 'euro_symbol', 'ev_charger', 'ev_shadow', 'ev_station', 'ev_station', 'event', 'event', 'event_available', 'event_available', 'event_busy', 'event_busy', 'event_note', 'event_note', 'event_repeat', 'event_repeat', 'event_seat', 'event_seat', 'event_upcoming', 'exclamation', 'exit_to_app', 'exit_to_app', 'expand', 'expand', 'expand_circle_down', 'expand_circle_down', 'expand_less', 'expand_less', 'expand_more', 'expand_more', 'explicit', 'explicit', 'explore', 'explore', 'explore_off', 'explore_off', 'exposure', 'exposure', 'exposure_neg_1', 'exposure_neg_1', 'exposure_neg_2', 'exposure_neg_2', 'exposure_plus_1', 'exposure_plus_1', 'exposure_plus_2', 'exposure_plus_2', 'exposure_zero', 'exposure_zero', 'extension', 'extension', 'extension_off', 'extension_off', 'face', 'face', 'face_2', 'face_2', 'face_3', 'face_3', 'face_4', 'face_4', 'face_5', 'face_5', 'face_6', 'face_6', 'face_retouching_natural', 'face_retouching_natural', 'face_retouching_off', 'face_retouching_off', 'face_unlock', 'fact_check', 'fact_check', 'factory', 'factory', 'familiar_face_and_zone', 'family_restroom', 'family_restroom', 'fast_forward', 'fast_forward', 'fast_rewind', 'fast_rewind', 'fastfood', 'fastfood', 'faucet', 'favorite', 'favorite', 'favorite_border', 'fax', 'fax', 'featured_play_list', 'featured_play_list', 'featured_video', 'featured_video', 'feed', 'feed', 'feedback', 'female', 'female', 'femur', 'femur_alt', 'fence', 'fence', 'festival', 'festival', 'fiber_dvr', 'fiber_dvr', 'fiber_manual_record', 'fiber_manual_record', 'fiber_new', 'fiber_new', 'fiber_pin', 'fiber_pin', 'fiber_smart_record', 'fiber_smart_record', 'file_copy', 'file_copy', 'file_download', 'file_download', 'file_download_done', 'file_download_done', 'file_download_off', 'file_download_off', 'file_open', 'file_open', 'file_present', 'file_present', 'file_upload', 'file_upload', 'file_upload_off', 'file_upload_off', 'filter', 'filter', 'filter_1', 'filter_1', 'filter_2', 'filter_2', 'filter_3', 'filter_3', 'filter_4', 'filter_4', 'filter_5', 'filter_5', 'filter_6', 'filter_6', 'filter_7', 'filter_7', 'filter_8', 'filter_8', 'filter_9', 'filter_9', 'filter_9_plus', 'filter_9_plus', 'filter_alt', 'filter_alt', 'filter_alt_off', 'filter_alt_off', 'filter_b_and_w', 'filter_b_and_w', 'filter_center_focus', 'filter_center_focus', 'filter_drama', 'filter_drama', 'filter_frames', 'filter_frames', 'filter_hdr', 'filter_hdr', 'filter_list', 'filter_list', 'filter_list_alt', 'filter_list_off', 'filter_list_off', 'filter_none', 'filter_none', 'filter_tilt_shift', 'filter_tilt_shift', 'filter_vintage', 'filter_vintage', 'find_in_page', 'find_in_page', 'find_replace', 'find_replace', 'fingerprint', 'fingerprint', 'fire_extinguisher', 'fire_extinguisher', 'fire_hydrant', 'fire_hydrant_alt', 'fire_truck', 'fire_truck', 'fireplace', 'fireplace', 'first_page', 'first_page', 'fit_screen', 'fit_screen', 'fitbit', 'fitness_center', 'fitness_center', 'flag', 'flag', 'flag_circle', 'flag_circle', 'flaky', 'flaky', 'flare', 'flare', 'flash_auto', 'flash_auto', 'flash_off', 'flash_off', 'flash_on', 'flash_on', 'flashlight_off', 'flashlight_off', 'flashlight_on', 'flashlight_on', 'flatware', 'flatware', 'flight', 'flight', 'flight_class', 'flight_class', 'flight_land', 'flight_land', 'flight_takeoff', 'flight_takeoff', 'flip', 'flip', 'flip_camera_android', 'flip_camera_android', 'flip_camera_ios', 'flip_camera_ios', 'flip_to_back', 'flip_to_back', 'flip_to_front', 'flip_to_front', 'flood', 'flood', 'floor_lamp', 'fluorescent', 'fluorescent', 'flutter_dash', 'flutter_dash', 'fmd_bad', 'fmd_bad', 'fmd_good', 'foggy', 'foggy', 'folder', 'folder', 'folder_copy', 'folder_copy', 'folder_delete', 'folder_delete', 'folder_off', 'folder_off', 'folder_open', 'folder_open', 'folder_shared', 'folder_shared', 'folder_special', 'folder_special', 'folder_zip', 'folder_zip', 'follow_the_signs', 'follow_the_signs', 'font_download', 'font_download', 'font_download_off', 'font_download_off', 'food_bank', 'food_bank', 'foot_bones', 'forest', 'forest', 'fork_left', 'fork_left', 'fork_right', 'fork_right', 'format_align_center', 'format_align_center', 'format_align_justify', 'format_align_justify', 'format_align_left', 'format_align_left', 'format_align_right', 'format_align_right', 'format_bold', 'format_bold', 'format_clear', 'format_clear', 'format_color_fill', 'format_color_fill', 'format_color_reset', 'format_color_reset', 'format_color_text', 'format_color_text', 'format_indent_decrease', 'format_indent_decrease', 'format_indent_increase', 'format_indent_increase', 'format_italic', 'format_italic', 'format_line_spacing', 'format_line_spacing', 'format_list_bulleted', 'format_list_bulleted', 'format_list_numbered', 'format_list_numbered', 'format_list_numbered_rtl', 'format_list_numbered_rtl', 'format_overline', 'format_overline', 'format_paint', 'format_paint', 'format_quote', 'format_quote', 'format_shapes', 'format_shapes', 'format_size', 'format_size', 'format_strikethrough', 'format_strikethrough', 'format_textdirection_l_to_r', 'format_textdirection_l_to_r', 'format_textdirection_r_to_l', 'format_textdirection_r_to_l', 'format_underlined', 'format_underlined', 'format_underlined_squiggle', 'forms_add_on', 'forms_apps_script', 'fort', 'fort', 'forum', 'forum', 'forward', 'forward', 'forward_10', 'forward_10', 'forward_30', 'forward_30', 'forward_5', 'forward_5', 'forward_to_inbox', 'forward_to_inbox', 'foundation', 'foundation', 'frame_person', 'free_breakfast', 'free_cancellation', 'free_cancellation', 'front_hand', 'front_hand', 'full_stacked_bar_chart', 'fullscreen', 'fullscreen', 'fullscreen_exit', 'fullscreen_exit', 'functions', 'functions', 'g_mobiledata', 'g_mobiledata', 'g_translate', 'g_translate', 'gamepad', 'games', 'garage', 'garage', 'garage_home', 'garden_cart', 'gas_meter', 'gas_meter', 'gate', 'gavel', 'gavel', 'generating_tokens', 'generating_tokens', 'gesture', 'gesture', 'get_app', 'gif', 'gif', 'gif_box', 'gif_box', 'girl', 'girl', 'gite', 'gite', 'glyphs', 'golf_course', 'golf_course', 'google_plus_reshare', 'google_wifi', 'gpp_bad', 'gpp_bad', 'gpp_good', 'gpp_maybe', 'gpp_maybe', 'gps_fixed', 'gps_not_fixed', 'gps_off', 'grade', 'grade', 'gradient', 'gradient', 'grading', 'grading', 'grain', 'grain', 'graphic_eq', 'graphic_eq', 'grass', 'grass', 'grid_3x3', 'grid_3x3', 'grid_4x4', 'grid_4x4', 'grid_goldenratio', 'grid_goldenratio', 'grid_off', 'grid_off', 'grid_on', 'grid_on', 'grid_view', 'grid_view', 'group', 'group', 'group_add', 'group_add', 'group_off', 'group_off', 'group_remove', 'group_remove', 'group_work', 'group_work', 'grouped_bar_chart', 'groups', 'groups', 'groups_2', 'groups_2', 'groups_3', 'groups_3', 'h_mobiledata', 'h_mobiledata', 'h_plus_mobiledata', 'h_plus_mobiledata', 'hail', 'hail', 'hand_bones', 'hand_gesture', 'handshake', 'handshake', 'handyman', 'handyman', 'hardware', 'hardware', 'hd', 'hd', 'hdr_auto', 'hdr_auto', 'hdr_auto_select', 'hdr_auto_select', 'hdr_enhanced_select', 'hdr_enhanced_select', 'hdr_off', 'hdr_off', 'hdr_off_select', 'hdr_off_select', 'hdr_on', 'hdr_on', 'hdr_on_select', 'hdr_on_select', 'hdr_plus', 'hdr_plus', 'hdr_strong', 'hdr_strong', 'hdr_weak', 'hdr_weak', 'headphones', 'headphones', 'headphones_battery', 'headphones_battery', 'headset', 'headset_mic', 'headset_mic', 'headset_off', 'headset_off', 'healing', 'healing', 'health_and_safety', 'health_and_safety', 'hearing', 'hearing', 'hearing_disabled', 'hearing_disabled', 'heart_broken', 'heart_broken', 'heart_minus', 'heart_plus', 'heat_pump', 'heat_pump', 'heat_pump_balance', 'height', 'height', 'help', 'help', 'help_center', 'help_center', 'help_outline', 'hevc', 'hevc', 'hexagon', 'hexagon', 'hide', 'hide_image', 'hide_image', 'hide_source', 'hide_source', 'high_quality', 'high_quality', 'highlight', 'highlight', 'highlight_alt', 'highlight_off', 'hiking', 'hiking', 'history', 'history', 'history_edu', 'history_edu', 'history_toggle_off', 'history_toggle_off', 'hive', 'hive', 'hls', 'hls', 'hls_off', 'hls_off', 'holiday_village', 'holiday_village', 'home', 'home', 'home_app_logo', 'home_filled', 'home_iot_device', 'home_max', 'home_max', 'home_max_dots', 'home_mini', 'home_mini', 'home_pin', 'home_repair_service', 'home_repair_service', 'home_speaker', 'home_work', 'home_work', 'horizontal_distribute', 'horizontal_distribute', 'horizontal_rule', 'horizontal_rule', 'horizontal_split', 'horizontal_split', 'hot_tub', 'hot_tub', 'hotel', 'hotel', 'hotel_class', 'hotel_class', 'hourglass_bottom', 'hourglass_bottom', 'hourglass_disabled', 'hourglass_disabled', 'hourglass_empty', 'hourglass_empty', 'hourglass_full', 'hourglass_full', 'hourglass_top', 'hourglass_top', 'house', 'house', 'house_siding', 'house_siding', 'house_with_shield', 'houseboat', 'houseboat', 'how_to_reg', 'how_to_reg', 'how_to_vote', 'how_to_vote', 'html', 'html', 'http', 'http', 'https', 'hub', 'hub', 'humerus', 'humerus_alt', 'humidity_high', 'humidity_low', 'humidity_mid', 'hvac', 'hvac', 'ice_skating', 'ice_skating', 'icecream', 'icecream', 'image', 'image', 'image_aspect_ratio', 'image_aspect_ratio', 'image_not_supported', 'image_not_supported', 'image_search', 'image_search', 'imagesearch_roller', 'imagesearch_roller', 'imagesmode', 'import_contacts', 'import_contacts', 'import_export', 'important_devices', 'important_devices', 'in_home_mode', 'inbox', 'inbox', 'incomplete_circle', 'incomplete_circle', 'indeterminate_check_box', 'indeterminate_check_box', 'info', 'info', 'info_outline', 'input', 'input', 'insert_chart', 'insert_chart', 'insert_chart_outlined', 'insert_comment', 'insert_drive_file', 'insert_emoticon', 'insert_invitation', 'insert_link', 'insert_page_break', 'insert_page_break', 'insert_photo', 'insights', 'insights', 'install_desktop', 'install_desktop', 'install_mobile', 'install_mobile', 'integration_instructions', 'integration_instructions', 'interests', 'interests', 'interpreter_mode', 'interpreter_mode', 'inventory', 'inventory', 'inventory_2', 'inventory_2', 'invert_colors', 'invert_colors', 'invert_colors_off', 'invert_colors_off', 'ios_share', 'ios_share', 'iron', 'iron', 'iso', 'javascript', 'javascript', 'join_full', 'join_full', 'join_inner', 'join_inner', 'join_left', 'join_left', 'join_right', 'join_right', 'kayaking', 'kayaking', 'kebab_dining', 'kebab_dining', 'kettle', 'key', 'key', 'key_off', 'key_off', 'key_visualizer', 'keyboard', 'keyboard', 'keyboard_alt', 'keyboard_alt', 'keyboard_arrow_down', 'keyboard_arrow_down', 'keyboard_arrow_left', 'keyboard_arrow_left', 'keyboard_arrow_right', 'keyboard_arrow_right', 'keyboard_arrow_up', 'keyboard_arrow_up', 'keyboard_backspace', 'keyboard_backspace', 'keyboard_capslock', 'keyboard_capslock', 'keyboard_command_key', 'keyboard_command_key', 'keyboard_control_key', 'keyboard_control_key', 'keyboard_double_arrow_down', 'keyboard_double_arrow_down', 'keyboard_double_arrow_left', 'keyboard_double_arrow_left', 'keyboard_double_arrow_right', 'keyboard_double_arrow_right', 'keyboard_double_arrow_up', 'keyboard_double_arrow_up', 'keyboard_hide', 'keyboard_hide', 'keyboard_option_key', 'keyboard_option_key', 'keyboard_return', 'keyboard_return', 'keyboard_tab', 'keyboard_tab', 'keyboard_voice', 'keyboard_voice', 'king_bed', 'king_bed', 'kitchen', 'kitchen', 'kitesurfing', 'kitesurfing', 'label', 'label', 'label_important', 'label_important', 'label_important_outline', 'label_off', 'label_off', 'lan', 'lan', 'landscape', 'landscape', 'landslide', 'landslide', 'language', 'language', 'laptop', 'laptop_chromebook', 'laptop_chromebook', 'laptop_mac', 'laptop_mac', 'laptop_windows', 'laptop_windows', 'last_page', 'last_page', 'launch', 'laundry', 'layers', 'layers', 'layers_clear', 'layers_clear', 'leaderboard', 'leaderboard', 'leak_add', 'leak_add', 'leak_remove', 'leak_remove', 'legend_toggle', 'legend_toggle', 'lens', 'lens', 'lens_blur', 'lens_blur', 'library_add', 'library_add', 'library_add_check', 'library_add_check', 'library_books', 'library_books', 'library_music', 'library_music', 'lift_to_talk', 'light', 'light', 'light_group', 'light_mode', 'light_mode', 'lightbulb', 'lightbulb', 'lightbulb_circle', 'lightbulb_circle', 'lightbulb_outline', 'line_axis', 'line_axis', 'line_style', 'line_style', 'line_weight', 'line_weight', 'linear_scale', 'linear_scale', 'link', 'link', 'link_off', 'link_off', 'linked_camera', 'linked_camera', 'liquor', 'liquor', 'list', 'list', 'list_alt', 'list_alt', 'live_help', 'live_help', 'live_tv', 'live_tv', 'living', 'living', 'local_activity', 'local_activity', 'local_airport', 'local_atm', 'local_atm', 'local_bar', 'local_bar', 'local_cafe', 'local_cafe', 'local_car_wash', 'local_car_wash', 'local_convenience_store', 'local_convenience_store', 'local_dining', 'local_dining', 'local_drink', 'local_drink', 'local_fire_department', 'local_fire_department', 'local_florist', 'local_florist', 'local_gas_station', 'local_gas_station', 'local_grocery_store', 'local_hospital', 'local_hospital', 'local_hotel', 'local_laundry_service', 'local_laundry_service', 'local_library', 'local_library', 'local_mall', 'local_mall', 'local_movies', 'local_offer', 'local_parking', 'local_parking', 'local_pharmacy', 'local_pharmacy', 'local_phone', 'local_pizza', 'local_pizza', 'local_play', 'local_police', 'local_police', 'local_post_office', 'local_post_office', 'local_printshop', 'local_see', 'local_see', 'local_shipping', 'local_shipping', 'local_taxi', 'local_taxi', 'location_automation', 'location_away', 'location_city', 'location_city', 'location_disabled', 'location_disabled', 'location_home', 'location_off', 'location_off', 'location_on', 'location_pin', 'location_searching', 'location_searching', 'lock', 'lock', 'lock_clock', 'lock_clock', 'lock_open', 'lock_open', 'lock_outline', 'lock_person', 'lock_person', 'lock_reset', 'lock_reset', 'login', 'login', 'logo_dev', 'logo_dev', 'logout', 'logout', 'looks', 'looks', 'looks_3', 'looks_3', 'looks_4', 'looks_4', 'looks_5', 'looks_5', 'looks_6', 'looks_6', 'looks_one', 'looks_one', 'looks_two', 'looks_two', 'loop', 'loupe', 'loupe', 'low_priority', 'low_priority', 'loyalty', 'loyalty', 'lte_mobiledata', 'lte_mobiledata', 'lte_plus_mobiledata', 'lte_plus_mobiledata', 'luggage', 'luggage', 'lunch_dining', 'lunch_dining', 'lyrics', 'lyrics', 'macro_off', 'macro_off', 'magic_button', 'mail', 'mail', 'mail_lock', 'mail_lock', 'mail_outline', 'male', 'male', 'man', 'man', 'man_2', 'man_2', 'man_3', 'man_3', 'man_4', 'man_4', 'manage_accounts', 'manage_accounts', 'manage_history', 'manage_history', 'manage_search', 'manage_search', 'map', 'map', 'maps_home_work', 'maps_ugc', 'maps_ugc', 'margin', 'margin', 'mark_as_unread', 'mark_as_unread', 'mark_chat_read', 'mark_chat_read', 'mark_chat_unread', 'mark_chat_unread', 'mark_email_read', 'mark_email_read', 'mark_email_unread', 'mark_email_unread', 'mark_unread_chat_alt', 'mark_unread_chat_alt', 'markunread', 'markunread_mailbox', 'markunread_mailbox', 'masks', 'masks', 'matter', 'maximize', 'maximize', 'media_bluetooth_off', 'media_bluetooth_off', 'media_bluetooth_on', 'media_bluetooth_on', 'mediation', 'mediation', 'medical_information', 'medical_information', 'medical_services', 'medical_services', 'medication', 'medication', 'medication_liquid', 'medication_liquid', 'meeting_room', 'meeting_room', 'memory', 'memory', 'menu', 'menu', 'menu_book', 'menu_book', 'menu_open', 'menu_open', 'merge', 'merge', 'merge_type', 'merge_type', 'message', 'mfg_nest_yale_lock', 'mic', 'mic', 'mic_external_off', 'mic_external_off', 'mic_external_on', 'mic_external_on', 'mic_none', 'mic_off', 'mic_off', 'microwave', 'microwave', 'microwave_gen', 'military_tech', 'military_tech', 'minimize', 'minimize', 'minor_crash', 'minor_crash', 'miscellaneous_services', 'missed_video_call', 'missed_video_call', 'mms', 'mms', 'mobile_friendly', 'mobile_friendly', 'mobile_off', 'mobile_off', 'mobile_screen_share', 'mobile_screen_share', 'mobiledata_off', 'mobiledata_off', 'mode', 'mode_comment', 'mode_comment', 'mode_cool', 'mode_cool_off', 'mode_edit', 'mode_edit_outline', 'mode_fan', 'mode_fan_off', 'mode_fan_off', 'mode_heat', 'mode_heat_cool', 'mode_heat_off', 'mode_night', 'mode_night', 'mode_of_travel', 'mode_of_travel', 'mode_off_on', 'mode_standby', 'mode_standby', 'model_training', 'model_training', 'monetization_on', 'monetization_on', 'money', 'money', 'money_off', 'money_off', 'money_off_csred', 'monitor', 'monitor', 'monitor_heart', 'monitor_heart', 'monitor_weight', 'monitor_weight', 'monitoring', 'monochrome_photos', 'monochrome_photos', 'mood', 'mood', 'mood_bad', 'mood_bad', 'mop', 'moped', 'more', 'more', 'more_down', 'more_horiz', 'more_horiz', 'more_time', 'more_time', 'more_up', 'more_vert', 'more_vert', 'mosque', 'mosque', 'motion_blur', 'motion_photos_auto', 'motion_photos_auto', 'motion_photos_off', 'motion_photos_off', 'motion_photos_on', 'motion_photos_pause', 'motion_photos_paused', 'motion_photos_paused', 'motion_sensor_active', 'motion_sensor_alert', 'motion_sensor_idle', 'motion_sensor_urgent', 'motorcycle', 'mouse', 'mouse', 'move_down', 'move_down', 'move_to_inbox', 'move_to_inbox', 'move_up', 'move_up', 'movie', 'movie', 'movie_creation', 'movie_filter', 'movie_filter', 'moving', 'moving', 'mp', 'mp', 'multicooker', 'multiline_chart', 'multiline_chart', 'multiple_stop', 'multiple_stop', 'museum', 'museum', 'music_note', 'music_note', 'music_off', 'music_off', 'music_video', 'music_video', 'my_location', 'my_location', 'nat', 'nat', 'nature', 'nature', 'nature_people', 'nature_people', 'navigate_before', 'navigate_before', 'navigate_next', 'navigate_next', 'navigation', 'navigation', 'near_me', 'near_me', 'near_me_disabled', 'near_me_disabled', 'nearby_error', 'nearby_error', 'nearby_off', 'nearby_off', 'nest_audio', 'nest_cam_floodlight', 'nest_cam_indoor', 'nest_cam_iq', 'nest_cam_iq_outdoor', 'nest_cam_magnet_mount', 'nest_cam_outdoor', 'nest_cam_stand', 'nest_cam_wall_mount', 'nest_cam_wired_stand', 'nest_cam_wired_stand', 'nest_clock_farsight_analog', 'nest_clock_farsight_digital', 'nest_connect', 'nest_detect', 'nest_display', 'nest_display_max', 'nest_doorbell_visitor', 'nest_eco_leaf', 'nest_farsight_weather', 'nest_found_savings', 'nest_heat_link_e', 'nest_heat_link_gen_3', 'nest_hello_doorbell', 'nest_locator_tag', 'nest_mini', 'nest_multi_room', 'nest_remote', 'nest_remote_comfort_sensor', 'nest_secure_alarm', 'nest_sunblock', 'nest_tag', 'nest_thermostat_e_eu', 'nest_thermostat_gen_3', 'nest_thermostat_sensor', 'nest_thermostat_sensor_eu', 'nest_thermostat_zirconium_eu', 'nest_true_radiant', 'nest_wake_on_approach', 'nest_wake_on_press', 'nest_wifi_gale', 'nest_wifi_mistral', 'nest_wifi_point', 'nest_wifi_point_vento', 'nest_wifi_router', 'network_cell', 'network_cell', 'network_check', 'network_check', 'network_locked', 'network_locked', 'network_ping', 'network_ping', 'network_wifi', 'network_wifi', 'network_wifi_1_bar', 'network_wifi_1_bar', 'network_wifi_2_bar', 'network_wifi_2_bar', 'network_wifi_3_bar', 'network_wifi_3_bar', 'new_label', 'new_label', 'new_releases', 'new_releases', 'newspaper', 'newspaper', 'next_plan', 'next_plan', 'next_week', 'next_week', 'nfc', 'nfc', 'night_shelter', 'night_shelter', 'night_sight_auto', 'night_sight_auto_off', 'nightlife', 'nightlife', 'nightlight', 'nightlight', 'nightlight_round', 'nights_stay', 'nights_stay', 'no_accounts', 'no_accounts', 'no_adult_content', 'no_adult_content', 'no_backpack', 'no_backpack', 'no_cell', 'no_crash', 'no_crash', 'no_drinks', 'no_drinks', 'no_encryption', 'no_encryption', 'no_encryption_gmailerrorred', 'no_flash', 'no_flash', 'no_food', 'no_food', 'no_luggage', 'no_luggage', 'no_meals', 'no_meals', 'no_meals_ouline', 'no_meeting_room', 'no_meeting_room', 'no_photography', 'no_photography', 'no_sim', 'no_sim', 'no_stroller', 'no_stroller', 'no_transfer', 'no_transfer', 'noise_aware', 'noise_aware', 'noise_control_off', 'noise_control_off', 'noise_control_on', 'nordic_walking', 'nordic_walking', 'north', 'north', 'north_east', 'north_east', 'north_west', 'north_west', 'not_accessible', 'not_accessible', 'not_interested', 'not_listed_location', 'not_listed_location', 'not_started', 'not_started', 'note', 'note', 'note_add', 'note_add', 'note_alt', 'note_alt', 'notes', 'notes', 'notification_add', 'notification_add', 'notification_important', 'notification_important', 'notifications', 'notifications', 'notifications_active', 'notifications_active', 'notifications_none', 'notifications_off', 'notifications_off', 'notifications_paused', 'notifications_paused', 'numbers', 'numbers', 'offline_bolt', 'offline_bolt', 'offline_pin', 'offline_pin', 'offline_share', 'offline_share', 'oil_barrel', 'oil_barrel', 'on_device_training', 'on_device_training', 'ondemand_video', 'online_prediction', 'online_prediction', 'opacity', 'opacity', 'open_in_browser', 'open_in_browser', 'open_in_full', 'open_in_full', 'open_in_new', 'open_in_new', 'open_in_new_off', 'open_in_new_off', 'open_with', 'open_with', 'orthopedics', 'other_houses', 'other_houses', 'outbound', 'outbound', 'outbox', 'outbox', 'outdoor_garden', 'outdoor_grill', 'outdoor_grill', 'outgoing_mail', 'outgoing_mail', 'outlet', 'outlet', 'outlined_flag', 'output', 'output', 'oven_gen', 'package', 'padding', 'padding', 'pages', 'pages', 'pageview', 'pageview', 'paid', 'paid', 'palette', 'palette', 'pan_tool', 'pan_tool', 'pan_tool_alt', 'pan_tool_alt', 'panorama', 'panorama', 'panorama_fish_eye', 'panorama_fish_eye', 'panorama_horizontal', 'panorama_horizontal', 'panorama_horizontal_select', 'panorama_photosphere', 'panorama_photosphere', 'panorama_photosphere_select', 'panorama_vertical', 'panorama_vertical', 'panorama_vertical_select', 'panorama_wide_angle', 'panorama_wide_angle', 'panorama_wide_angle_select', 'paragliding', 'paragliding', 'park', 'park', 'partly_cloudy_day', 'partly_cloudy_night', 'party_mode', 'party_mode', 'password', 'password', 'pattern', 'pattern', 'pause', 'pause', 'pause_circle', 'pause_circle', 'pause_circle_filled', 'pause_circle_outline', 'pause_presentation', 'pause_presentation', 'payment', 'payments', 'payments', 'pedal_bike', 'pedal_bike', 'pending', 'pending', 'pending_actions', 'pending_actions', 'pentagon', 'pentagon', 'people', 'people_alt', 'people_outline', 'percent', 'percent', 'pergola', 'perm_camera_mic', 'perm_camera_mic', 'perm_contact_calendar', 'perm_contact_calendar', 'perm_data_setting', 'perm_data_setting', 'perm_device_information', 'perm_device_information', 'perm_identity', 'perm_media', 'perm_media', 'perm_phone_msg', 'perm_phone_msg', 'perm_scan_wifi', 'perm_scan_wifi', 'person', 'person', 'person_2', 'person_2', 'person_3', 'person_3', 'person_4', 'person_4', 'person_add', 'person_add', 'person_add_alt', 'person_add_alt_1', 'person_add_disabled', 'person_add_disabled', 'person_filled', 'person_off', 'person_off', 'person_outline', 'person_pin', 'person_pin', 'person_pin_circle', 'person_pin_circle', 'person_remove', 'person_remove', 'person_remove_alt_1', 'person_search', 'person_search', 'personal_injury', 'personal_injury', 'personal_video', 'pest_control', 'pest_control', 'pest_control_rodent', 'pest_control_rodent', 'pets', 'pets', 'phishing', 'phishing', 'phone', 'phone_android', 'phone_android', 'phone_bluetooth_speaker', 'phone_bluetooth_speaker', 'phone_callback', 'phone_callback', 'phone_disabled', 'phone_disabled', 'phone_enabled', 'phone_enabled', 'phone_forwarded', 'phone_forwarded', 'phone_in_talk', 'phone_in_talk', 'phone_iphone', 'phone_iphone', 'phone_locked', 'phone_locked', 'phone_missed', 'phone_missed', 'phone_paused', 'phone_paused', 'phonelink', 'phonelink_erase', 'phonelink_erase', 'phonelink_lock', 'phonelink_lock', 'phonelink_off', 'phonelink_off', 'phonelink_ring', 'phonelink_ring', 'phonelink_setup', 'phonelink_setup', 'photo', 'photo', 'photo_album', 'photo_album', 'photo_camera', 'photo_camera', 'photo_camera_back', 'photo_camera_back', 'photo_camera_front', 'photo_camera_front', 'photo_filter', 'photo_filter', 'photo_frame', 'photo_library', 'photo_library', 'photo_size_select_actual', 'photo_size_select_large', 'photo_size_select_large', 'photo_size_select_small', 'photo_size_select_small', 'php', 'php', 'piano', 'piano', 'piano_off', 'piano_off', 'picture_as_pdf', 'picture_as_pdf', 'picture_in_picture', 'picture_in_picture', 'picture_in_picture_alt', 'picture_in_picture_alt', 'pie_chart', 'pie_chart', 'pie_chart_outline', 'pie_chart_outlined', 'pin', 'pin', 'pin_drop', 'pin_drop', 'pin_end', 'pin_end', 'pin_invoke', 'pin_invoke', 'pinch', 'pinch', 'pinch_zoom_in', 'pinch_zoom_out', 'pivot_table_chart', 'pivot_table_chart', 'pix', 'place', 'place_item', 'plagiarism', 'plagiarism', 'play_arrow', 'play_arrow', 'play_circle', 'play_circle', 'play_circle_filled', 'play_circle_outline', 'play_disabled', 'play_disabled', 'play_for_work', 'play_for_work', 'play_lesson', 'play_lesson', 'play_pause', 'playlist_add', 'playlist_add', 'playlist_add_check', 'playlist_add_check', 'playlist_add_check_circle', 'playlist_add_check_circle', 'playlist_add_circle', 'playlist_add_circle', 'playlist_play', 'playlist_play', 'playlist_remove', 'playlist_remove', 'plumbing', 'plumbing', 'plus_one', 'podcasts', 'podcasts', 'point_of_sale', 'point_of_sale', 'policy', 'policy', 'poll', 'polyline', 'polyline', 'polymer', 'polymer', 'pool', 'pool', 'portable_wifi_off', 'portable_wifi_off', 'portrait', 'post_add', 'post_add', 'potted_plant', 'power', 'power', 'power_input', 'power_input', 'power_off', 'power_off', 'power_rounded', 'power_settings_new', 'power_settings_new', 'precision_manufacturing', 'precision_manufacturing', 'pregnant_woman', 'pregnant_woman', 'present_to_all', 'present_to_all', 'preview', 'preview', 'price_change', 'price_change', 'price_check', 'price_check', 'print', 'print', 'print_disabled', 'print_disabled', 'priority', 'priority_high', 'priority_high', 'privacy', 'privacy_tip', 'privacy_tip', 'private_connectivity', 'private_connectivity', 'production_quantity_limits', 'production_quantity_limits', 'productivity', 'propane', 'propane', 'propane_tank', 'propane_tank', 'psychology', 'psychology', 'psychology_alt', 'psychology_alt', 'public', 'public', 'public_off', 'public_off', 'publish', 'publish', 'published_with_changes', 'published_with_changes', 'punch_clock', 'punch_clock', 'push_pin', 'push_pin', 'qr_code', 'qr_code', 'qr_code_2', 'qr_code_2', 'qr_code_scanner', 'qr_code_scanner', 'query_builder', 'query_stats', 'query_stats', 'question_answer', 'question_mark', 'question_mark', 'queue', 'queue_music', 'queue_music', 'queue_play_next', 'queue_play_next', 'quick_phrases', 'quickreply', 'quickreply', 'quiet_time', 'quiet_time_active', 'quiz', 'quiz', 'r_mobiledata', 'r_mobiledata', 'radar', 'radar', 'radio', 'radio', 'radio_button_checked', 'radio_button_checked', 'radio_button_unchecked', 'radio_button_unchecked', 'radiology', 'railway_alert', 'railway_alert', 'rainy', 'ramen_dining', 'ramen_dining', 'ramp_left', 'ramp_left', 'ramp_right', 'ramp_right', 'range_hood', 'rate_review', 'rate_review', 'raw_off', 'raw_off', 'raw_on', 'raw_on', 'read_more', 'read_more', 'real_estate_agent', 'real_estate_agent', 'receipt', 'receipt', 'receipt_long', 'receipt_long', 'recent_actors', 'recent_actors', 'recommend', 'recommend', 'record_voice_over', 'record_voice_over', 'rectangle', 'rectangle', 'recycling', 'recycling', 'redeem', 'redeem', 'redo', 'redo', 'reduce_capacity', 'reduce_capacity', 'refresh', 'refresh', 'remember_me', 'remember_me', 'remote_gen', 'remove', 'remove', 'remove_circle', 'remove_circle_outline', 'remove_done', 'remove_done', 'remove_from_queue', 'remove_from_queue', 'remove_moderator', 'remove_moderator', 'remove_red_eye', 'remove_road', 'remove_road', 'remove_shopping_cart', 'remove_shopping_cart', 'reorder', 'reorder', 'repartition', 'repartition', 'repeat', 'repeat', 'repeat_on', 'repeat_on', 'repeat_one', 'repeat_one', 'repeat_one_on', 'repeat_one_on', 'replay', 'replay', 'replay_10', 'replay_10', 'replay_30', 'replay_30', 'replay_5', 'replay_5', 'replay_circle_filled', 'replay_circle_filled', 'reply', 'reply', 'reply_all', 'reply_all', 'report', 'report', 'report_gmailerrorred', 'report_off', 'report_off', 'report_problem', 'request_page', 'request_page', 'request_quote', 'request_quote', 'reset_tv', 'reset_tv', 'restart_alt', 'restart_alt', 'restaurant', 'restaurant', 'restaurant_menu', 'restaurant_menu', 'restore', 'restore_from_trash', 'restore_from_trash', 'restore_page', 'restore_page', 'reviews', 'reviews', 'rheumatology', 'rib_cage', 'rice_bowl', 'rice_bowl', 'ring_volume', 'ring_volume', 'rocket', 'rocket', 'rocket_launch', 'rocket_launch', 'roller_shades', 'roller_shades', 'roller_shades_closed', 'roller_shades_closed', 'roller_skating', 'roller_skating', 'roofing', 'roofing', 'room', 'room_preferences', 'room_preferences', 'room_service', 'room_service', 'rotate_90_degrees_ccw', 'rotate_90_degrees_ccw', 'rotate_90_degrees_cw', 'rotate_90_degrees_cw', 'rotate_left', 'rotate_left', 'rotate_right', 'rotate_right', 'roundabout_left', 'roundabout_left', 'roundabout_right', 'roundabout_right', 'rounded_corner', 'rounded_corner', 'route', 'route', 'router', 'router', 'routine', 'rowing', 'rowing', 'rss_feed', 'rss_feed', 'rsvp', 'rsvp', 'rtt', 'rtt', 'rule', 'rule', 'rule_folder', 'rule_folder', 'run_circle', 'run_circle', 'running_with_errors', 'running_with_errors', 'rv_hookup', 'rv_hookup', 'safety_check', 'safety_check', 'safety_divider', 'safety_divider', 'sailing', 'sailing', 'sanitizer', 'sanitizer', 'satellite', 'satellite', 'satellite_alt', 'satellite_alt', 'save', 'save', 'save_alt', 'save_as', 'save_as', 'saved_search', 'saved_search', 'savings', 'savings', 'scale', 'scale', 'scanner', 'scanner', 'scatter_plot', 'scatter_plot', 'scene', 'schedule', 'schedule', 'schedule_send', 'schedule_send', 'schema', 'schema', 'school', 'school', 'science', 'science', 'score', 'score', 'scoreboard', 'scoreboard', 'screen_lock_landscape', 'screen_lock_landscape', 'screen_lock_portrait', 'screen_lock_portrait', 'screen_lock_rotation', 'screen_lock_rotation', 'screen_rotation', 'screen_rotation', 'screen_rotation_alt', 'screen_rotation_alt', 'screen_search_desktop', 'screen_search_desktop', 'screen_share', 'screen_share', 'screenshot', 'screenshot', 'screenshot_monitor', 'screenshot_monitor', 'scuba_diving', 'scuba_diving', 'sd', 'sd', 'sd_card', 'sd_card', 'sd_card_alert', 'sd_card_alert', 'sd_storage', 'search', 'search', 'search_off', 'search_off', 'security', 'security', 'security_update', 'security_update_good', 'security_update_good', 'security_update_warning', 'security_update_warning', 'segment', 'segment', 'select_all', 'select_all', 'select_check_box', 'self_improvement', 'self_improvement', 'sell', 'sell', 'send', 'send', 'send_and_archive', 'send_and_archive', 'send_time_extension', 'send_time_extension', 'send_to_mobile', 'send_to_mobile', 'sensor_door', 'sensor_door', 'sensor_occupied', 'sensor_occupied', 'sensor_window', 'sensor_window', 'sensors', 'sensors', 'sensors_off', 'sensors_off', 'sentiment_dissatisfied', 'sentiment_dissatisfied', 'sentiment_extremely_dissatisfied', 'sentiment_neutral', 'sentiment_neutral', 'sentiment_satisfied', 'sentiment_satisfied', 'sentiment_satisfied_alt', 'sentiment_very_dissatisfied', 'sentiment_very_dissatisfied', 'sentiment_very_satisfied', 'sentiment_very_satisfied', 'set_meal', 'set_meal', 'settings', 'settings', 'settings_accessibility', 'settings_accessibility', 'settings_alert', 'settings_applications', 'settings_applications', 'settings_backup_restore', 'settings_backup_restore', 'settings_bluetooth', 'settings_bluetooth', 'settings_brightness', 'settings_brightness', 'settings_cell', 'settings_cell', 'settings_ethernet', 'settings_ethernet', 'settings_input_antenna', 'settings_input_antenna', 'settings_input_component', 'settings_input_component', 'settings_input_composite', 'settings_input_hdmi', 'settings_input_hdmi', 'settings_input_svideo', 'settings_input_svideo', 'settings_overscan', 'settings_overscan', 'settings_phone', 'settings_phone', 'settings_power', 'settings_power', 'settings_remote', 'settings_remote', 'settings_suggest', 'settings_suggest', 'settings_system_daydream', 'settings_system_daydream', 'settings_voice', 'settings_voice', 'settop_component', 'severe_cold', 'severe_cold', 'shape_line', 'shape_line', 'share', 'share', 'share_location', 'share_location', 'share_reviews', 'shield', 'shield', 'shield_moon', 'shield_moon', 'shield_with_heart', 'shield_with_house', 'shop', 'shop', 'shop_2', 'shop_two', 'shop_two', 'shopping_bag', 'shopping_bag', 'shopping_basket', 'shopping_basket', 'shopping_cart', 'shopping_cart', 'shopping_cart_checkout', 'shopping_cart_checkout', 'short_text', 'short_text', 'shortcut', 'show_chart', 'show_chart', 'shower', 'shower', 'shuffle', 'shuffle', 'shuffle_on', 'shuffle_on', 'shutter_speed', 'shutter_speed', 'sick', 'sick', 'sign_language', 'sign_language', 'signal_cellular_0_bar', 'signal_cellular_0_bar', 'signal_cellular_1_bar', 'signal_cellular_1_bar', 'signal_cellular_2_bar', 'signal_cellular_2_bar', 'signal_cellular_3_bar', 'signal_cellular_3_bar', 'signal_cellular_4_bar', 'signal_cellular_4_bar', 'signal_cellular_alt', 'signal_cellular_alt', 'signal_cellular_alt_1_bar', 'signal_cellular_alt_1_bar', 'signal_cellular_alt_2_bar', 'signal_cellular_alt_2_bar', 'signal_cellular_connected_no_internet_0_bar', 'signal_cellular_connected_no_internet_0_bar', 'signal_cellular_connected_no_internet_1_bar', 'signal_cellular_connected_no_internet_2_bar', 'signal_cellular_connected_no_internet_3_bar', 'signal_cellular_connected_no_internet_4_bar', 'signal_cellular_connected_no_internet_4_bar', 'signal_cellular_no_sim', 'signal_cellular_nodata', 'signal_cellular_nodata', 'signal_cellular_null', 'signal_cellular_null', 'signal_cellular_off', 'signal_cellular_off', 'signal_disconnected', 'signal_wifi_0_bar', 'signal_wifi_0_bar', 'signal_wifi_1_bar', 'signal_wifi_1_bar_lock', 'signal_wifi_2_bar', 'signal_wifi_2_bar_lock', 'signal_wifi_3_bar', 'signal_wifi_3_bar_lock', 'signal_wifi_4_bar', 'signal_wifi_4_bar', 'signal_wifi_4_bar_lock', 'signal_wifi_bad', 'signal_wifi_bad', 'signal_wifi_connected_no_internet_0', 'signal_wifi_connected_no_internet_1', 'signal_wifi_connected_no_internet_2', 'signal_wifi_connected_no_internet_3', 'signal_wifi_connected_no_internet_4', 'signal_wifi_off', 'signal_wifi_off', 'signal_wifi_statusbar_1_bar', 'signal_wifi_statusbar_2_bar', 'signal_wifi_statusbar_3_bar', 'signal_wifi_statusbar_4_bar', 'signal_wifi_statusbar_connected_no_internet', 'signal_wifi_statusbar_connected_no_internet_1', 'signal_wifi_statusbar_connected_no_internet_2', 'signal_wifi_statusbar_connected_no_internet_3', 'signal_wifi_statusbar_connected_no_internet_4', 'signal_wifi_statusbar_not_connected', 'signal_wifi_statusbar_not_connected', 'signal_wifi_statusbar_null', 'signal_wifi_statusbar_null', 'signpost', 'signpost', 'sim_card', 'sim_card', 'sim_card_alert', 'sim_card_download', 'sim_card_download', 'single_bed', 'single_bed', 'sip', 'sip', 'skateboarding', 'skateboarding', 'skeleton', 'skip_next', 'skip_next', 'skip_previous', 'skip_previous', 'skull', 'sledding', 'sledding', 'slideshow', 'slideshow', 'slow_motion_video', 'slow_motion_video', 'smart_button', 'smart_button', 'smart_display', 'smart_display', 'smart_outlet', 'smart_screen', 'smart_screen', 'smart_toy', 'smart_toy', 'smartphone', 'smartphone', 'smoke_free', 'smoke_free', 'smoking_rooms', 'smoking_rooms', 'sms', 'sms', 'sms_failed', 'sms_failed', 'snippet_folder', 'snippet_folder', 'snooze', 'snooze', 'snowboarding', 'snowboarding', 'snowing', 'snowing', 'snowmobile', 'snowmobile', 'snowshoeing', 'snowshoeing', 'soap', 'soap', 'social_distance', 'social_distance', 'solar_power', 'solar_power', 'sort', 'sort', 'sort_by_alpha', 'sort_by_alpha', 'sos', 'sos', 'sound_detection_dog_barking', 'sound_detection_glass_break', 'sound_detection_loud_sound', 'soup_kitchen', 'soup_kitchen', 'source', 'south', 'south', 'south_america', 'south_america', 'south_east', 'south_east', 'south_west', 'south_west', 'spa', 'spa', 'space_bar', 'space_bar', 'space_dashboard', 'space_dashboard', 'spatial_audio', 'spatial_audio', 'spatial_audio_off', 'spatial_audio_off', 'spatial_tracking', 'spatial_tracking', 'speaker', 'speaker', 'speaker_group', 'speaker_group', 'speaker_notes', 'speaker_notes', 'speaker_notes_off', 'speaker_notes_off', 'speaker_phone', 'speaker_phone', 'speech_to_text', 'speed', 'speed', 'spellcheck', 'spellcheck', 'splitscreen', 'splitscreen', 'spoke', 'spoke', 'sports', 'sports', 'sports_bar', 'sports_bar', 'sports_baseball', 'sports_baseball', 'sports_basketball', 'sports_basketball', 'sports_cricket', 'sports_cricket', 'sports_esports', 'sports_esports', 'sports_football', 'sports_football', 'sports_golf', 'sports_golf', 'sports_gymnastics', 'sports_gymnastics', 'sports_handball', 'sports_handball', 'sports_hockey', 'sports_hockey', 'sports_kabaddi', 'sports_kabaddi', 'sports_martial_arts', 'sports_martial_arts', 'sports_mma', 'sports_mma', 'sports_motorsports', 'sports_motorsports', 'sports_rugby', 'sports_rugby', 'sports_score', 'sports_score', 'sports_soccer', 'sports_soccer', 'sports_tennis', 'sports_tennis', 'sports_volleyball', 'sports_volleyball', 'sprinkler', 'square', 'square', 'square_foot', 'square_foot', 'ssid_chart', 'ssid_chart', 'stacked_bar_chart', 'stacked_bar_chart', 'stacked_line_chart', 'stacked_line_chart', 'stadia_controller', 'stadium', 'stadium', 'stairs', 'stairs', 'star', 'star', 'star_border', 'star_border_purple500', 'star_half', 'star_half', 'star_outline', 'star_purple500', 'star_rate', 'stars', 'stars', 'start', 'start', 'stay_current_landscape', 'stay_current_landscape', 'stay_current_portrait', 'stay_current_portrait', 'stay_primary_landscape', 'stay_primary_landscape', 'stay_primary_portrait', 'stay_primary_portrait', 'sticky_note_2', 'sticky_note_2', 'stop', 'stop', 'stop_circle', 'stop_circle', 'stop_screen_share', 'stop_screen_share', 'storage', 'storage', 'store', 'store', 'store_mall_directory', 'storefront', 'storefront', 'storm', 'storm', 'straight', 'straight', 'straighten', 'straighten', 'stream', 'stream', 'streetview', 'streetview', 'strikethrough_s', 'strikethrough_s', 'stroller', 'stroller', 'style', 'style', 'styler', 'subdirectory_arrow_left', 'subdirectory_arrow_left', 'subdirectory_arrow_right', 'subdirectory_arrow_right', 'subject', 'subject', 'subscript', 'subscript', 'subscriptions', 'subscriptions', 'subtitles', 'subtitles', 'subtitles_off', 'subtitles_off', 'subway', 'subway', 'summarize', 'summarize', 'sunny', 'sunny', 'sunny_snowing', 'sunny_snowing', 'superscript', 'superscript', 'supervised_user_circle', 'supervised_user_circle', 'supervisor_account', 'supervisor_account', 'support', 'support', 'support_agent', 'support_agent', 'surfing', 'surfing', 'surround_sound', 'surround_sound', 'swap_calls', 'swap_calls', 'swap_horiz', 'swap_horiz', 'swap_horizontal_circle', 'swap_horizontal_circle', 'swap_vert', 'swap_vert', 'swap_vertical_circle', 'swap_vertical_circle', 'swipe', 'swipe', 'swipe_down', 'swipe_down', 'swipe_down_alt', 'swipe_down_alt', 'swipe_left', 'swipe_left', 'swipe_left_alt', 'swipe_left_alt', 'swipe_right', 'swipe_right', 'swipe_right_alt', 'swipe_right_alt', 'swipe_up', 'swipe_up', 'swipe_up_alt', 'swipe_up_alt', 'swipe_vertical', 'swipe_vertical', 'switch', 'switch_access_shortcut', 'switch_access_shortcut', 'switch_access_shortcut_add', 'switch_access_shortcut_add', 'switch_account', 'switch_account', 'switch_camera', 'switch_camera', 'switch_left', 'switch_left', 'switch_right', 'switch_right', 'switch_video', 'switch_video', 'swords', 'synagogue', 'synagogue', 'sync', 'sync', 'sync_alt', 'sync_alt', 'sync_disabled', 'sync_disabled', 'sync_lock', 'sync_lock', 'sync_problem', 'sync_problem', 'system_security_update', 'system_security_update_good', 'system_security_update_warning', 'system_update', 'system_update', 'system_update_alt', 'system_update_alt', 'tab', 'tab', 'tab_unselected', 'tab_unselected', 'table', 'table_bar', 'table_bar', 'table_chart', 'table_chart', 'table_restaurant', 'table_restaurant', 'table_rows', 'table_rows', 'table_view', 'table_view', 'tablet', 'tablet', 'tablet_android', 'tablet_android', 'tablet_mac', 'tablet_mac', 'tag', 'tag', 'tag_faces', 'takeout_dining', 'takeout_dining', 'tamper_detection_off', 'tamper_detection_on', 'tap_and_play', 'tap_and_play', 'tapas', 'tapas', 'task', 'task', 'task_alt', 'task_alt', 'taxi_alert', 'taxi_alert', 'team_dashboard', 'temp_preferences_custom', 'temp_preferences_eco', 'temple_buddhist', 'temple_buddhist', 'temple_hindu', 'temple_hindu', 'tenancy', 'terminal', 'terminal', 'terrain', 'text_decrease', 'text_decrease', 'text_fields', 'text_fields', 'text_format', 'text_format', 'text_increase', 'text_increase', 'text_rotate_up', 'text_rotate_up', 'text_rotate_vertical', 'text_rotate_vertical', 'text_rotation_angledown', 'text_rotation_angledown', 'text_rotation_angleup', 'text_rotation_angleup', 'text_rotation_down', 'text_rotation_down', 'text_rotation_none', 'text_rotation_none', 'text_snippet', 'text_snippet', 'text_to_speech', 'textsms', 'texture', 'texture', 'theater_comedy', 'theater_comedy', 'theaters', 'theaters', 'thermometer', 'thermostat', 'thermostat', 'thermostat_auto', 'thermostat_auto', 'thermostat_carbon', 'thumb_down', 'thumb_down', 'thumb_down_alt', 'thumb_down_off', 'thumb_down_off_alt', 'thumb_up', 'thumb_up', 'thumb_up_alt', 'thumb_up_off', 'thumb_up_off_alt', 'thumbs_up_down', 'thumbs_up_down', 'thunderstorm', 'thunderstorm', 'tibia', 'tibia_alt', 'time_auto', 'time_to_leave', 'timelapse', 'timelapse', 'timeline', 'timeline', 'timer', 'timer', 'timer_10', 'timer_10', 'timer_10_alt_1', 'timer_10_select', 'timer_10_select', 'timer_3', 'timer_3', 'timer_3_alt_1', 'timer_3_select', 'timer_3_select', 'timer_off', 'timer_off', 'tips_and_updates', 'tips_and_updates', 'tire_repair', 'tire_repair', 'title', 'title', 'toc', 'toc', 'today', 'today', 'toggle_off', 'toggle_off', 'toggle_on', 'toggle_on', 'token', 'token', 'toll', 'toll', 'tonality', 'tonality', 'tools_flat_head', 'tools_installation_kit', 'tools_ladder', 'tools_level', 'tools_phillips', 'tools_pliers_wire_stripper', 'tools_power_drill', 'tools_wrench', 'topic', 'topic', 'tornado', 'tornado', 'touch_app', 'touch_app', 'tour', 'tour', 'toys', 'toys', 'toys_fan', 'track_changes', 'track_changes', 'traffic', 'traffic', 'trail_length', 'trail_length_medium', 'trail_length_short', 'train', 'train', 'tram', 'tram', 'transcribe', 'transcribe', 'transfer_within_a_station', 'transfer_within_a_station', 'transform', 'transform', 'transgender', 'transgender', 'transit_enterexit', 'transit_enterexit', 'translate', 'translate', 'transportation', 'travel_explore', 'travel_explore', 'trending_down', 'trending_down', 'trending_flat', 'trending_flat', 'trending_up', 'trending_up', 'trip_origin', 'trip_origin', 'troubleshoot', 'try', 'tsunami', 'tsunami', 'tty', 'tty', 'tune', 'tune', 'tungsten', 'turn_left', 'turn_left', 'turn_right', 'turn_right', 'turn_sharp_left', 'turn_sharp_left', 'turn_sharp_right', 'turn_sharp_right', 'turn_slight_left', 'turn_slight_left', 'turn_slight_right', 'turn_slight_right', 'turned_in', 'turned_in_not', 'tv', 'tv', 'tv_gen', 'tv_off', 'tv_off', 'tv_with_assistant', 'two_wheeler', 'two_wheeler', 'type_specimen', 'type_specimen', 'u_turn_left', 'u_turn_left', 'u_turn_right', 'u_turn_right', 'ulna_radius', 'ulna_radius_alt', 'umbrella', 'umbrella', 'unarchive', 'unarchive', 'undo', 'undo', 'unfold_less', 'unfold_less', 'unfold_less_double', 'unfold_less_double', 'unfold_more', 'unfold_more', 'unfold_more_double', 'unfold_more_double', 'unpublished', 'unpublished', 'unsubscribe', 'unsubscribe', 'upcoming', 'upcoming', 'update', 'update', 'update_disabled', 'update_disabled', 'upgrade', 'upgrade', 'upload', 'upload', 'upload_file', 'upload_file', 'usb', 'usb', 'usb_off', 'usb_off',
+//  'vaccines', 'vaccines', 'valve', 'vape_free', 'vape_free', 'vaping_rooms', 'vaping_rooms', 'verified', 'verified', 'verified_user', 'verified_user', 'vertical_align_bottom', 'vertical_align_bottom', 'vertical_align_center', 'vertical_align_center', 'vertical_align_top', 'vertical_align_top', 'vertical_distribute', 'vertical_distribute', 'vertical_shades', 'vertical_shades', 'vertical_shades_closed', 'vertical_shades_closed', 'vertical_split', 'vertical_split', 'vibration', 'vibration', 'video_call', 'video_call', 'video_camera_back', 'video_camera_back', 'video_camera_front', 'video_camera_front', 'video_chat', 'video_chat', 'video_file', 'video_file', 'video_label', 'video_label', 'video_library', 'video_library', 'video_settings', 'video_settings', 'video_stable', 'video_stable', 'videocam', 'videocam', 'videocam_off', 'videocam_off', 'videogame_asset', 'videogame_asset', 'videogame_asset_off', 'videogame_asset_off', 'view_agenda', 'view_agenda', 'view_array', 'view_array', 'view_carousel', 'view_carousel', 'view_column', 'view_column', 'view_comfy', 'view_comfy', 'view_comfy_alt', 'view_comfy_alt', 'view_compact', 'view_compact', 'view_compact_alt', 'view_compact_alt', 'view_cozy', 'view_cozy', 'view_day', 'view_day', 'view_headline', 'view_headline', 'view_in_ar', 'view_in_ar', 'view_in_ar_new', 'view_kanban', 'view_kanban', 'view_list', 'view_list', 'view_module', 'view_module', 'view_quilt', 'view_quilt', 'view_sidebar', 'view_sidebar', 'view_stream', 'view_stream', 'view_timeline', 'view_timeline', 'view_week', 'view_week', 'vignette', 'vignette', 'villa', 'villa', 'visibility', 'visibility', 'visibility_off', 'visibility_off', 'voice_chat', 'voice_chat', 'voice_over_off', 'voice_over_off', 'voicemail', 'voicemail', 'volcano', 'volcano', 'volume_down', 'volume_down', 'volume_down_alt', 'volume_down_alt', 'volume_mute', 'volume_mute', 'volume_off', 'volume_off', 'volume_up', 'volume_up', 'volunteer_activism', 'volunteer_activism', 'vpn_key', 'vpn_key', 'vpn_key_off', 'vpn_key_off', 'vpn_lock', 'vpn_lock', 'vrpano', 'vrpano',
+//  'wallet', 'wallet', 'wallpaper', 'wallpaper', 'warehouse', 'warehouse', 'warning', 'warning', 'warning_amber', 'wash', 'wash', 'watch', 'watch', 'watch_later', 'watch_off', 'watch_off', 'water', 'water', 'water_damage', 'water_damage', 'water_drop', 'water_drop', 'water_heater', 'waterfall_chart', 'waterfall_chart', 'waves', 'waves', 'waving_hand', 'waving_hand', 'wb_auto', 'wb_auto', 'wb_cloudy', 'wb_incandescent', 'wb_incandescent', 'wb_iridescent', 'wb_iridescent', 'wb_shade', 'wb_shade', 'wb_sunny', 'wb_sunny', 'wb_twighlight', 'wb_twilight', 'wb_twilight', 'wc', 'wc', 'weather_snowy', 'web', 'web', 'web_asset', 'web_asset', 'web_asset_off', 'web_asset_off', 'web_stories', 'web_stories', 'webhook', 'webhook', 'weekend', 'weekend', 'weight', 'west', 'west', 'whatsapp', 'whatshot', 'whatshot', 'wheelchair_pickup', 'wheelchair_pickup', 'where_to_vote', 'where_to_vote', 'widgets', 'widgets', 'width_full', 'width_full', 'width_normal', 'width_normal', 'width_wide', 'width_wide', 'wifi', 'wifi', 'wifi_1_bar', 'wifi_1_bar', 'wifi_2_bar', 'wifi_2_bar', 'wifi_calling', 'wifi_calling', 'wifi_calling_1', 'wifi_calling_1', 'wifi_calling_2', 'wifi_calling_2', 'wifi_calling_3', 'wifi_calling_3', 'wifi_channel', 'wifi_channel', 'wifi_find', 'wifi_find', 'wifi_lock', 'wifi_lock', 'wifi_off', 'wifi_off', 'wifi_password', 'wifi_password', 'wifi_protected_setup', 'wifi_protected_setup', 'wifi_tethering', 'wifi_tethering', 'wifi_tethering_error', 'wifi_tethering_error', 'wifi_tethering_off', 'wifi_tethering_off', 'wind_power', 'wind_power', 'window', 'window', 'window_closed', 'window_open', 'window_sensor', 'wine_bar', 'wine_bar', 'woman', 'woman', 'woman_2', 'woman_2', 'work', 'work', 'work_history', 'work_history', 'work_off', 'work_outline', 'workspace_premium', 'workspace_premium', 'workspaces', 'workspaces', 'workspaces_filled', 'workspaces_outline', 'wrap_text', 'wrap_text', 'wrong_location', 'wrong_location', 'wysiwyg', 'wysiwyg',
+//  'yard', 'yard', 'youtube_searched_for', 'youtube_searched_for', 'zone_person_alert', 'zone_person_idle', 'zone_person_urgent', 'zoom_in', 'zoom_in', 'zoom_in_map', 'zoom_in_map', 'zoom_out', 'zoom_out', 'zoom_out_map', 'zoom_out_map'];
 class DesignerRef {
     constructor(_model) {
         this._model = _model;
@@ -30677,6 +30696,8 @@ class DesignerElementComponent {
         this._ref = _ref;
         this.change = new EventEmitter();
     }
+    ngOnInit() {
+    }
     get args() { return this.model.options; }
 }
 DesignerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerElementComponent, deps: [{ token: i2$1.FormBuilder }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -30691,6 +30712,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
     }, propDecorators: { change: [{
                 type: Output
             }] } });
+class DesignerTypeElementComponent extends DesignerElementComponent {
+    constructor() {
+        super(...arguments);
+        this.form = this._fb.group({
+            name: this._fb.control(null, Validators.required),
+            title: this._fb.control(null, Validators.required),
+        });
+    }
+    assignargs(evt) {
+        Object.assign(this.args, evt);
+        this.change.emit();
+    }
+    ngOnInit() {
+        const { name, title } = this.form.controls;
+        this.model.draft && title.valueChanges.pipe().subscribe((t) => {
+            t && name.setValue(programName(t));
+        });
+    }
+}
+DesignerTypeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerTypeElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DesignerTypeElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: DesignerTypeElementComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerTypeElementComponent, decorators: [{
+            type: Directive
+        }] });
+function programName(name) {
+    return name.
+        replace(/[A-Z]+/g, (c, i) => (i > 0 ? '-' : '') + c.toLowerCase()).
+        replace(' ', '_');
+}
+/** */
 class DesignerCubeElementComponent extends DesignerElementComponent {
     constructor(fb, ref) {
         super(fb, ref);
@@ -30725,10 +30776,13 @@ class DesignerCubeElementComponent extends DesignerElementComponent {
         this._forthAxes(evt.value);
     }
     ngOnInit() {
+        super.ngOnInit();
         const cubeId = this.args['cube'];
         this.cube = !cubeId ? this.cubes[0] : this.cubes.find(c => c.name === cubeId);
-        this._secondaryAxes(this.args['xAxis']);
-        this._thirdAxes(this.args['series']);
+        if (this.args['xAxis']) {
+            this._secondaryAxes(this.args['xAxis']);
+            this.args['series'] && this._thirdAxes(this.args['series']);
+        }
     }
 }
 DesignerCubeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerCubeElementComponent, deps: [{ token: i2$1.FormBuilder }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -30794,10 +30848,10 @@ class DesignerItemComponent {
     }
 }
 DesignerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerItemComponent, deps: [{ token: i0.Injector }, { token: PaneRef, optional: true }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { editMode: "editMode", template: "template", model: "model", designer: "designer" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<span></span><ng-container #container></ng-container>', isInline: true, styles: [":host{flex:1}::ng-deep form{padding:8px}\n"] });
+DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { editMode: "editMode", template: "template", model: "model", designer: "designer" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<span></span><ng-container #container></ng-container>', isInline: true, styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-element', template: '<span></span><ng-container #container></ng-container>', styles: [":host{flex:1}::ng-deep form{padding:8px}\n"] }]
+            args: [{ selector: 'bizdoc-designer-element', template: '<span></span><ng-container #container></ng-container>', styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: PaneRef, decorators: [{
                         type: Optional
@@ -30819,8 +30873,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
 
 /** */
 let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
-    constructor(_panes, _ref) {
+    constructor(_panes, _ps, _ref) {
         this._panes = _panes;
+        this._ps = _ps;
         this._ref = _ref;
         this.loading = true;
         this.saving = false;
@@ -30830,19 +30885,19 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         this._ref.populate().subscribe(r => {
             this.model = r;
             this.sections = [
-                { elements: r.forms, type: 'Forms', template: 'form-designer' },
-                { elements: r.actions, type: 'Actions', template: 'action-designer' },
-                { elements: r.reports, type: 'Reports', template: 'report-designer' },
-                { elements: r.widgets, type: 'Widgets', template: 'widget-designer' },
+                { elements: r.forms, type: 'Forms', template: 'form-designer', templates: r.tForms },
+                { elements: r.actions, type: 'Actions', template: 'action-designer', templates: r.tActions },
+                { elements: r.reports, type: 'Reports', template: 'report-designer', templates: r.tReports },
+                { elements: r.widgets, type: 'Widgets', template: 'widget-designer', templates: r.tWidgets },
                 { elements: r.views, type: 'Views', template: 'view-designer' },
-                { elements: r.guides, type: 'Guides', template: 'guide-designer' },
-                { elements: r.cubes, type: 'Cubes', template: 'cube-designer' },
-                { elements: r.folders, type: 'Folders', template: 'folder-designer' },
-                { elements: r.roles, type: 'Roles', template: 'role-designer' },
-                { elements: r.states, type: 'States', template: 'state-designer' },
-                { elements: r.utilities, type: 'Utilities', template: 'utility-designer' },
-                { elements: r.types, type: 'Types', template: 'type-designer' },
-                { elements: r.rules, type: 'Rules', template: 'rule-designer' },
+                { elements: r.guides, type: 'Guides', template: 'guide-designer', templates: [{}] },
+                { elements: r.cubes, type: 'Cubes', template: 'cube-designer', templates: r.tCubes },
+                { elements: r.folders, type: 'Folders', template: 'folder-designer', templates: [{}] },
+                { elements: r.roles, type: 'Roles', template: 'role-designer', templates: [{}] },
+                { elements: r.states, type: 'States', template: 'state-designer', templates: [{}] },
+                { elements: r.utilities, type: 'Utilities', template: 'utility-designer', templates: r.tUtilities },
+                { elements: r.types, type: 'Types', template: 'type-designer', templates: r.tTypes },
+                { elements: r.rules, type: 'Rules', template: 'rule-designer', templates: r.tRules },
             ];
             this.loading = false;
         });
@@ -30850,24 +30905,57 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     drop(event) {
         moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     }
+    /**
+     * Ctrl-s save
+     * @param event
+     */
+    handleKeyboardEvent(event) {
+        if (this.dirty && event.ctrlKey && (event.which === 83 || event.which === 115)) {
+            this.save();
+            event.preventDefault();
+        }
+    }
     discard(section, element) {
         ;
     }
+    create(section) {
+        if (section.templates.length === 1) {
+            const [template] = section.templates, element = {
+                type: template.type,
+                name: template.title ? this._uniqueName(programName(template.title), section) : null,
+                title: template.title ? this._uniqueTitle(template.title, section) : null,
+                draft: true,
+                template: template.template
+            };
+            section.elements.push(element);
+            this.edit(element, section.template);
+        }
+        else { }
+    }
     copy(section, element) {
-        let i = element.name.lastIndexOf('_'), n = 1;
-        let name = element.name.substr(0, i < 0 ? element.name.length : i + 1) + '_' + n;
-        while (section.elements.find(e => e.name === name)) {
+        section.elements.splice(section.elements.indexOf(element) + 1, 0, Object.assign(JSON.parse(JSON.stringify(element)), {
+            copyOf: element.name,
+            name: this._uniqueName(element.name, section),
+            title: this._uniqueTitle(element.title, section),
+            draft: true
+        }));
+        this.dirty = true;
+    }
+    _uniqueName(name, section) {
+        let i = name.lastIndexOf('_'), n = 0, val;
+        do {
             n++;
-            name = element.name.substr(0, element.name.length - i) + '_' + n;
-        }
-        i = element.title.lastIndexOf(' '), n = 1;
-        let title = element.title.substr(0, i < 0 || parseInt(element.title.substr(i)) === NaN ? element.title.length : i - 1) + ' ' + n;
-        while (section.elements.find(e => e.title === title)) {
+            val = (i < 0 || isNaN(parseInt(name.substr(i))) ? name : name.substr(0, i + 1)) + '_' + n;
+        } while (section.elements.find(e => e.name === val));
+        return val;
+    }
+    _uniqueTitle(title, section) {
+        let i = title.lastIndexOf(' '), n = 0, val;
+        do {
             n++;
-            title = element.title.substr(0, i < 0 || parseInt(element.title.substr(i)) === NaN ? element.title.length : i - 1) + ' ' + n;
-        }
-        section.elements.splice(section.elements.indexOf(element) + 1, 0, Object.assign(JSON.parse(JSON.stringify(element)), { copyOf: element.name, name, title }));
-        this.dirty = true;
+            val = (i < 0 || isNaN(parseInt(title.substr(i))) ? title : title.substr(0, i - 1)) + ' ' + n;
+        } while (section.elements.find(e => e.title === val));
+        return val;
     }
     edit(element, template) {
         this._panes.navigate(DesignerItemComponent, {
@@ -30888,43 +30976,172 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     }
     save() {
         this.saving = true;
-        this.sections.forEach(s => s.elements.forEach(e => e.options = cleanup(e.options)));
-        this._ref.execute(this.model).subscribe(() => this.saving = false);
+        this.sections.forEach(s => s.elements.forEach(e => {
+            if (e.privileges && !Object.keys(e.privileges).length)
+                delete e.privileges;
+            e.options = cleanup(e.options);
+        }));
+        return this._ref.execute(this.model).toPromise().then(() => {
+            this._ps.toast('ChangesSaved');
+            this.saving = false;
+        }, () => {
+            this._ps.error();
+            this.saving = false;
+        });
     }
 };
-ConfigurationDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ConfigurationDesignerComponent, deps: [{ token: PanesRouter }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfigurationDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ConfigurationDesignerComponent, selector: "ng-component", 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</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\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-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\" (change)=\"dirty = true\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <ng-container *ngIf=\"e.section !== 'utilities' || e.name !== model.utilityName\">\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)=\"s.elements.remove(e)\" *ngIf=\"e.copyOf\" [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        </ng-container>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s.template)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i17.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i17.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i17.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i17.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["editMode", "template", "model", "designer"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] });
+ConfigurationDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ConfigurationDesignerComponent, deps: [{ token: PanesRouter }, { token: PromptService }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
+ConfigurationDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ConfigurationDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\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-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\" (change)=\"dirty = true\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <!--<ng-container *ngIf=\"e.section !== 'utilities' || e.name !== model.utilityName\">\r\n        </ng-container>-->\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)=\"s.elements.remove(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.template)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"compose-element\" *ngIf=\"s.templates?.length\" matRipple>\r\n        <button mat-icon-button (click)=\"create(s)\" [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .compose-element{border:2px dashed gray;min-width:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .compose-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i17.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i17.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i17.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i17.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["editMode", "template", "model", "designer"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] });
 ConfigurationDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-designer' })
 ], ConfigurationDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ConfigurationDesignerComponent, decorators: [{
             type: Component,
-            args: [{ animations: [itemAnimation], 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</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\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-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\" (change)=\"dirty = true\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <ng-container *ngIf=\"e.section !== 'utilities' || e.name !== model.utilityName\">\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)=\"s.elements.remove(e)\" *ngIf=\"e.copyOf\" [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        </ng-container>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s.template)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"] }]
-        }], ctorParameters: function () { return [{ type: PanesRouter }, { type: UtilityRef }]; } });
+            args: [{ animations: [itemAnimation], 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</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\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-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\" (change)=\"dirty = true\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <!--<ng-container *ngIf=\"e.section !== 'utilities' || e.name !== model.utilityName\">\r\n        </ng-container>-->\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)=\"s.elements.remove(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.template)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"compose-element\" *ngIf=\"s.templates?.length\" matRipple>\r\n        <button mat-icon-button (click)=\"create(s)\" [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .compose-element{border:2px dashed gray;min-width:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .compose-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: PanesRouter }, { type: PromptService }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+function cleanup(params) {
+    if (!params)
+        return null;
+    Object.keys(params).forEach(k => {
+        const val = params[k];
+        if (val === null || val === undefined || (isArray(val) && !val.length))
+            delete params[k];
+        else if (isObject(val))
+            params[k] = cleanup(val);
+    });
+    if (!Object.keys(params).length)
+        return null;
+    return params;
+}
 
 /** */
 let FormDesignerComponent = class FormDesignerComponent {
-    constructor(_fb, _session, _ref) {
+    constructor(_fb, _pane, _cd, _ps, _session, _ref) {
         this._fb = _fb;
+        this._pane = _pane;
+        this._cd = _cd;
+        this._ps = _ps;
         this._session = _session;
         this._ref = _ref;
         this.loading = true;
         this.tools = true;
         this.saving = false;
+        this.history = [];
+        this.historyIndex = 0;
         this.form = this._fb.group({
-            name: this._fb.control(null),
-            label: this._fb.control(null),
-            dataType: this._fb.control(null)
+            subject: null,
+            value: null,
+            cube: null,
+            summary: null,
         });
+        this.dirty = false;
+        this.settings = false;
+        this.datatypes = this._session.profile.types;
+        this.cubes = this._session.profile.cubes;
     }
     ngOnInit() {
-        this.datatypes = this._session.profile.types;
-        this._ref.populate().subscribe(r => {
-            this.model = r;
+        this._pane.queryParamsChange.subscribe(p => {
+            const { formId } = p;
+            formId && this._open(formId);
+        });
+        this.form.valueChanges.pipe().
+            subscribe(v => {
+            this._notifyChange();
+            Object.assign(this.model, v);
+        });
+    }
+    _open(formId) {
+        this._ref.populate(formId).subscribe(r => {
+            this._formId = formId;
+            this.model = r || { sections: [] };
             this.loading = false;
         });
     }
+    addSection(evt) {
+        var _a;
+        let n = 0, name, title;
+        do {
+            n++;
+            name = 'section' + '-' + n;
+            title = 'Section' + ' ' + n;
+        } while (this.model.sections.find(s => s.name === name || s.title === title));
+        this._notifyChange();
+        this.model.sections.push({
+            name,
+            title,
+            rows: [{ fields: [] }]
+        });
+        this._cd.detectChanges();
+        (_a = evt.target.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    addRow(section, evt) {
+        var _a;
+        this._notifyChange();
+        section.rows.push({
+            fields: []
+        });
+        (_a = evt.target.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
+        this._cd.detectChanges();
+    }
+    addField(section, row, kind, evt) {
+        var _a;
+        let n = 0, name, label;
+        do {
+            n++;
+            name = 'field' + '_' + n;
+            label = 'Field' + ' ' + n;
+        } while (section.rows.find(r => r.fields.find(f => f.name === name || f.label === label) != null));
+        this._notifyChange();
+        row.fields.push({
+            kind,
+            name,
+            label,
+        });
+        this._cd.detectChanges();
+        (_a = evt.target.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    removeField(row, field) {
+        this._notifyChange();
+        row.fields.remove(field);
+    }
+    removeSection(section) {
+        this._notifyChange();
+        this.model.sections.remove(section);
+    }
+    removeRow(section, row) {
+        this._notifyChange();
+        section.rows.remove(row);
+    }
+    _notifyChange() {
+        this.history.push(this.model);
+        this.historyIndex = this.history.length - 1;
+        this.dirty = true;
+    }
+    undo() {
+        this.model = this.history[this.historyIndex];
+        this.historyIndex--;
+    }
+    redo() {
+        this.model = this.history[this.historyIndex];
+        this.historyIndex++;
+    }
+    /**
+     * Ctrl-s save; Ctrl-z undo
+     * @param event
+     */
+    handleKeyboardEvent(event) {
+        if (this.dirty && event.ctrlKey) {
+            if (event.which === 83 || event.which === 115) {
+                this.save();
+                event.preventDefault();
+            }
+        }
+    }
     drop(event) {
+        this._notifyChange();
         if (event.previousContainer === event.container) {
             moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
         }
@@ -30934,18 +31151,28 @@ let FormDesignerComponent = class FormDesignerComponent {
     }
     save() {
         this.saving = true;
-        this._ref.execute(this.model).subscribe(() => this.saving = false);
+        this._ref.execute({ metadata: this.model, formId: this._formId }).subscribe(() => {
+            this._ps.toast('ChangesSaved');
+            this.dirty = false;
+            this.saving = false;
+        }, () => {
+            this._ps.error();
+            this.saving = false;
+        });
     }
 };
-FormDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignerComponent, deps: [{ token: i2$1.FormBuilder }, { token: SessionService }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
-FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignerComponent, selector: "ng-component", ngImport: i0, template: "<mat-toolbar></mat-toolbar>\r\n<div class=\"row\">\r\n  <div></div>\r\n  <div *ngIf=\"tools\"></div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
+FormDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignerComponent, deps: [{ token: i2$1.FormBuilder }, { token: PaneRef }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: SessionService }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
+FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === 0\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon>redo</mat-icon></button>\r\n</mat-toolbar>\r\n<button mat-icon-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"settings\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Value'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Subject'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"subject\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Summary'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"summary\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Analysis'|translate}}</mat-label>\r\n    <mat-select formControlName=\"cube\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<div class=\"form\" autocomplete=\"off\" *ngIf=\"model\" cdkDropList [cdkDropListData]=\"model.sections\" (cdkDropListDropped)=\"drop($event)\">\r\n  <section class=\"column\" *ngFor=\"let s of model.sections\" cdkDrag>\r\n    <div class=\"row\">\r\n      <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.title\" />\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.name\" />\r\n        </mat-form-field>\r\n        <div cdkDropList [cdkDropListData]=\"s.rows\" (cdkDropListDropped)=\"drop($event)\">\r\n          <div *ngFor=\"let r of s.rows\" class=\"row designer-row\" cdkDrag>\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n            <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"r.fields\" (cdkDropListDropped)=\"drop($event)\" class=\"row\">\r\n              <div *ngFor=\"let f of r.fields\" cdkDrag class=\"field row\">\r\n                <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"column\">\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Name'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.name\" />\r\n                  </mat-form-field>\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Label'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.label\" />\r\n                  </mat-form-field>\r\n                  <ng-container [ngSwitch]=\"f.kind\">\r\n                    <mat-form-field *ngSwitchCase=\"'Date'\">\r\n                      <input matInput [required]=\"f.required\" />\r\n                    </mat-form-field>\r\n                    <div *ngSwitchCase=\"'Text'\">\r\n                    </div>\r\n                    <mat-form-field *ngSwitchCase=\"'Select'\">\r\n                      <mat-label>{{'DataType'|translate}}</mat-label>\r\n                      <mat-select [(value)]=\"f.dataType\" required>\r\n                        <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n                      </mat-select>\r\n                    </mat-form-field>\r\n                    <div *ngSwitchDefault>\r\n                      <mat-form-field>\r\n                        <mat-label>{{'Type'|translate}}</mat-label>\r\n                        <mat-select [(value)]=\"f.kind\" required>\r\n                          <mat-option value=\"String\">{{'None'|translate}}</mat-option>\r\n                          <mat-option value=\"Number\">{{'Number'|translate}}</mat-option>\r\n                          <mat-option value=\"PhoneNumber\">{{'PhoneNumber'|translate}}</mat-option>\r\n                          <mat-option value=\"EmailAddress\">{{'EmailAddress'|translate}}</mat-option>\r\n                          <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n                        </mat-select>\r\n                      </mat-form-field>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"actions\">\r\n                  <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n                <div *cdkDragPlaceholder class=\"drag-placeholder\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"column\">\r\n              <button mat-stroked-button [matMenuTriggerFor]=\"fieldKindMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n              <mat-menu #fieldKindMenu>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'String', $event)\">{{'Input'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Date', $event)\">{{'Date'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Select', $event)\">{{'Select'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Checkbox', $event)\">{{'Checkbox'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Switch', $event)\">{{'Switch'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Text', $event)\">{{'Text'|translate}}</button>\r\n              </mat-menu>\r\n              <span class=\"divider\"></span>\r\n              <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n      <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'Value'|translate}}</mat-label>\r\n      <bizdoc-ace-input [(value)]=\"s.value\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n  </section>\r\n  <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n</div>\r\n", styles: [".form{margin:8px}section,.designer-row,.field{border:2px solid transparent;border-radius:3px;padding:8px}section:hover,.designer-row:hover,.field:hover{border:2px dotted}section .designer-row .field{flex:1}.drag-placeholder{border:2px dashed}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i11$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FormDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-form-designer' })
 ], FormDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignerComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar></mat-toolbar>\r\n<div class=\"row\">\r\n  <div></div>\r\n  <div *ngIf=\"tools\"></div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: SessionService }, { type: UtilityRef }]; } });
+            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === 0\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon>redo</mat-icon></button>\r\n</mat-toolbar>\r\n<button mat-icon-button (click)=\"settings = !settings\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"settings\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Value'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"value\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Subject'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"subject\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Summary'|translate}}</mat-label>\r\n    <bizdoc-ace-input formControlName=\"summary\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Analysis'|translate}}</mat-label>\r\n    <mat-select formControlName=\"cube\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<div class=\"form\" autocomplete=\"off\" *ngIf=\"model\" cdkDropList [cdkDropListData]=\"model.sections\" (cdkDropListDropped)=\"drop($event)\">\r\n  <section class=\"column\" *ngFor=\"let s of model.sections\" cdkDrag>\r\n    <div class=\"row\">\r\n      <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.title\" />\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput [(value)]=\"s.name\" />\r\n        </mat-form-field>\r\n        <div cdkDropList [cdkDropListData]=\"s.rows\" (cdkDropListDropped)=\"drop($event)\">\r\n          <div *ngFor=\"let r of s.rows\" class=\"row designer-row\" cdkDrag>\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n            <div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"r.fields\" (cdkDropListDropped)=\"drop($event)\" class=\"row\">\r\n              <div *ngFor=\"let f of r.fields\" cdkDrag class=\"field row\">\r\n                <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"column\">\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Name'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.name\" />\r\n                  </mat-form-field>\r\n                  <mat-form-field>\r\n                    <mat-label>{{'Label'|translate}}</mat-label>\r\n                    <input matInput required [(value)]=\"f.label\" />\r\n                  </mat-form-field>\r\n                  <ng-container [ngSwitch]=\"f.kind\">\r\n                    <mat-form-field *ngSwitchCase=\"'Date'\">\r\n                      <input matInput [required]=\"f.required\" />\r\n                    </mat-form-field>\r\n                    <div *ngSwitchCase=\"'Text'\">\r\n                    </div>\r\n                    <mat-form-field *ngSwitchCase=\"'Select'\">\r\n                      <mat-label>{{'DataType'|translate}}</mat-label>\r\n                      <mat-select [(value)]=\"f.dataType\" required>\r\n                        <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n                      </mat-select>\r\n                    </mat-form-field>\r\n                    <div *ngSwitchDefault>\r\n                      <mat-form-field>\r\n                        <mat-label>{{'Type'|translate}}</mat-label>\r\n                        <mat-select [(value)]=\"f.kind\" required>\r\n                          <mat-option value=\"String\">{{'None'|translate}}</mat-option>\r\n                          <mat-option value=\"Number\">{{'Number'|translate}}</mat-option>\r\n                          <mat-option value=\"PhoneNumber\">{{'PhoneNumber'|translate}}</mat-option>\r\n                          <mat-option value=\"EmailAddress\">{{'EmailAddress'|translate}}</mat-option>\r\n                          <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n                        </mat-select>\r\n                      </mat-form-field>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"actions\">\r\n                  <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n                <div *cdkDragPlaceholder class=\"drag-placeholder\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"column\">\r\n              <button mat-stroked-button [matMenuTriggerFor]=\"fieldKindMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n              <mat-menu #fieldKindMenu>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'String', $event)\">{{'Input'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Date', $event)\">{{'Date'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Select', $event)\">{{'Select'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Checkbox', $event)\">{{'Checkbox'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Switch', $event)\">{{'Switch'|translate}}</button>\r\n                <button mat-menu-item (click)=\"addField(s, r, 'Text', $event)\">{{'Text'|translate}}</button>\r\n              </mat-menu>\r\n              <span class=\"divider\"></span>\r\n              <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n      <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'Value'|translate}}</mat-label>\r\n      <bizdoc-ace-input [(value)]=\"s.value\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'Expression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n  </section>\r\n  <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n</div>\r\n", styles: [".form{margin:8px}section,.designer-row,.field{border:2px solid transparent;border-radius:3px;padding:8px}section:hover,.designer-row:hover,.field:hover{border:2px dotted}section .designer-row .field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: PaneRef }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: SessionService }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 let ParallelViewDesignComponent = class ParallelViewDesignComponent extends DesignerCubeElementComponent {
     constructor() {
@@ -30963,13 +31190,13 @@ let ParallelViewDesignComponent = class ParallelViewDesignComponent extends Desi
     }
 };
 ParallelViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ParallelViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ParallelViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ParallelViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form *ngIf=\"cube; else none\" 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 (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"args.xAxis\" [cube]=\"args.cube\"\r\n                          [xAxis]=\"args.xAxis\"\r\n                          [series]=\"args.series\"\r\n                          [indices]=\"args.indices\"\r\n                          [filters]=\"args.filters\"\r\n                          [chartType]=\"args.chartType\"\r\n                          [scope]=\"args.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n<ng-template #none></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: ["filters", "xAxis", "series", "indices", "cube", "size", "chartType", "scope", "palettes"], outputs: ["explore"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ParallelViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ParallelViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"args.xAxis\" [cube]=\"args.cube\"\r\n                          [xAxis]=\"args.xAxis\"\r\n                          [series]=\"args.series\"\r\n                          [indices]=\"args.indices\"\r\n                          [filters]=\"args.filters\"\r\n                          [chartType]=\"args.chartType\"\r\n                          [scope]=\"args.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: ["filters", "xAxis", "series", "indices", "cube", "size", "chartType", "scope", "palettes"], outputs: ["explore"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ParallelViewDesignComponent = __decorate([
     BizDoc({ selector: 'parallel-view-designer' })
 ], ParallelViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ParallelViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form *ngIf=\"cube; else none\" 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 (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"args.xAxis\" [cube]=\"args.cube\"\r\n                          [xAxis]=\"args.xAxis\"\r\n                          [series]=\"args.series\"\r\n                          [indices]=\"args.indices\"\r\n                          [filters]=\"args.filters\"\r\n                          [chartType]=\"args.chartType\"\r\n                          [scope]=\"args.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n<ng-template #none></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"args.xAxis\" [cube]=\"args.cube\"\r\n                          [xAxis]=\"args.xAxis\"\r\n                          [series]=\"args.series\"\r\n                          [indices]=\"args.indices\"\r\n                          [filters]=\"args.filters\"\r\n                          [chartType]=\"args.chartType\"\r\n                          [scope]=\"args.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let SumViewDesignComponent = class SumViewDesignComponent extends DesignerCubeElementComponent {
@@ -30980,43 +31207,68 @@ let SumViewDesignComponent = class SumViewDesignComponent extends DesignerCubeEl
             xAxis: this._fb.control(null, Validators.required),
             series: null,
             indices: null,
+            filters: this._fb.group({}),
             periodPolicy: null,
             aggregate: null,
         });
     }
 };
 SumViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SumViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SumViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SumViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" *ngIf=\"editMode; else info\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Series'|translate}}</mat-label>\r\n    <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</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 (selectionChange)=\"seriesSelected($event)\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\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      <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n      <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<div>\r\n  <bizdoc-cube-sum *ngIf=\"args.xAxis\" [xAxis]=\"args.xAxis\"\r\n                   [filters]=\"args.filters || {}\"\r\n                   [parentAxis]=\"args.series\"\r\n                   [scope]=\"args.scope\"\r\n                   [periodPolicy]=\"args.periodPolicy\"\r\n                   [indices]=\"args.indices\"\r\n                   [cube]=\"cube.name\"></bizdoc-cube-sum>\r\n</div>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeSumComponent, selector: "bizdoc-cube-sum", inputs: ["xAxis", "periodPolicy", "parentAxis", "filters", "cube", "indices", "scope"], outputs: ["explore"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+SumViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SumViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</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 (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\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        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <div>\r\n    <bizdoc-cube-sum *ngIf=\"args.xAxis\" [xAxis]=\"args.xAxis\"\r\n                     [filters]=\"args.filters || {}\"\r\n                     [parentAxis]=\"args.series\"\r\n                     [scope]=\"args.scope\"\r\n                     [periodPolicy]=\"args.periodPolicy\"\r\n                     [indices]=\"args.indices\"\r\n                     [cube]=\"cube.name\"></bizdoc-cube-sum>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeSumComponent, selector: "bizdoc-cube-sum", inputs: ["xAxis", "periodPolicy", "parentAxis", "filters", "cube", "indices", "scope"], outputs: ["explore"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 SumViewDesignComponent = __decorate([
     BizDoc({ selector: 'period-view-designer' })
 ], SumViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SumViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" *ngIf=\"editMode; else info\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Series'|translate}}</mat-label>\r\n    <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</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 (selectionChange)=\"seriesSelected($event)\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\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      <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n      <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<div>\r\n  <bizdoc-cube-sum *ngIf=\"args.xAxis\" [xAxis]=\"args.xAxis\"\r\n                   [filters]=\"args.filters || {}\"\r\n                   [parentAxis]=\"args.series\"\r\n                   [scope]=\"args.scope\"\r\n                   [periodPolicy]=\"args.periodPolicy\"\r\n                   [indices]=\"args.indices\"\r\n                   [cube]=\"cube.name\"></bizdoc-cube-sum>\r\n</div>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</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 (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\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        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <div>\r\n    <bizdoc-cube-sum *ngIf=\"args.xAxis\" [xAxis]=\"args.xAxis\"\r\n                     [filters]=\"args.filters || {}\"\r\n                     [parentAxis]=\"args.series\"\r\n                     [scope]=\"args.scope\"\r\n                     [periodPolicy]=\"args.periodPolicy\"\r\n                     [indices]=\"args.indices\"\r\n                     [cube]=\"cube.name\"></bizdoc-cube-sum>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let MatrixViewDesignComponent = class MatrixViewDesignComponent extends DesignerCubeElementComponent {
     constructor() {
         super(...arguments);
+        this.sum = this._fb.array([]);
         this.form = this._fb.group({
             cube: null,
             xAxis: this._fb.control(null, Validators.required),
             series: this._fb.control(null, Validators.required),
-            sum: this._fb.array([]),
             indices: null,
             aggregate: null,
-            filters: null
+            sum: this.sum,
+            filters: null,
         });
     }
+    ngOnInit() {
+        if (this.args.sum) {
+            if (isArray(this.args.sum))
+                this.args.sum.forEach(s => this.add(s));
+            else
+                this.add(this.args.sum);
+        }
+        super.ngOnInit();
+    }
+    add(sum) {
+        this.sum.push(this._fb.group({
+            axis: (sum === null || sum === void 0 ? void 0 : sum.axis) || 'series',
+            title: this._fb.control(sum === null || sum === void 0 ? void 0 : sum.title, Validators.required),
+            value: sum === null || sum === void 0 ? void 0 : sum.value,
+            format: sum === null || sum === void 0 ? void 0 : sum.format,
+            precision: sum === null || sum === void 0 ? void 0 : sum.precision,
+            explorable: sum === null || sum === void 0 ? void 0 : sum.explorable,
+            calculate: sum === null || sum === void 0 ? void 0 : sum.calculate
+        }));
+    }
+    drop(event) {
+        moveItemInArray(this.model.axes, event.previousIndex, event.currentIndex);
+    }
 };
 MatrixViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatrixViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" *ngIf=\"editMode\" [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 (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option>{{'Default'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Series'|translate}}</mat-label>\r\n    <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Filters'|translate}}</mat-label>\r\n    <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\">\r\n      <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n    <mat-label>{{'Indices'|translate}}</mat-label>\r\n    <mat-select formControlName=\"indices\" multiple>\r\n      <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!forthAxes || !forthAxes.length\">\r\n      <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n    <mat-hint></mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+MatrixViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Filters'|translate}}</mat-label>\r\n      <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!forthAxes || forthAxes?.length\">\r\n        <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <div formArrayName=\"sum\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n      <div class=\"row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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-label>{{'Axis'|translate}}</mat-label>\r\n        <mat-radio-group formControlName=\"axis\">\r\n          <mat-radio-button value=\"xAxis\">{{'X'|translate}}</mat-radio-button>\r\n          <mat-radio-button value=\"series\">{{'Y'|translate}}</mat-radio-button>\r\n        </mat-radio-group>\r\n        &nbsp;\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=\"accumulate\">{{'Accumulate'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n  <!--<ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n    --> \r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 MatrixViewDesignComponent = __decorate([
     BizDoc({ selector: 'matrix-view-designer' })
 ], MatrixViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatrixViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" *ngIf=\"editMode\" [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 (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option>{{'Default'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Series'|translate}}</mat-label>\r\n    <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Filters'|translate}}</mat-label>\r\n    <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\">\r\n      <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n    <mat-label>{{'Indices'|translate}}</mat-label>\r\n    <mat-select formControlName=\"indices\" multiple>\r\n      <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!forthAxes || !forthAxes.length\">\r\n      <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n    <mat-hint></mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\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 (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Filters'|translate}}</mat-label>\r\n      <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!forthAxes || forthAxes?.length\">\r\n        <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <div formArrayName=\"sum\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n      <div class=\"row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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-label>{{'Axis'|translate}}</mat-label>\r\n        <mat-radio-group formControlName=\"axis\">\r\n          <mat-radio-button value=\"xAxis\">{{'X'|translate}}</mat-radio-button>\r\n          <mat-radio-button value=\"series\">{{'Y'|translate}}</mat-radio-button>\r\n        </mat-radio-group>\r\n        &nbsp;\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=\"accumulate\">{{'Accumulate'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n  <!--<ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n    --> \r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let ChartViewDesignComponent = class ChartViewDesignComponent extends DesignerCubeElementComponent {
@@ -31044,20 +31296,170 @@ let ChartViewDesignComponent = class ChartViewDesignComponent extends DesignerCu
     }
 };
 ChartViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ChartViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ChartViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ChartViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form *ngIf=\"cubes.length; else none\" 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 (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n<ng-template #none></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeAccumulationChartComponent, selector: "bizdoc-cube-accum", inputs: ["palettes", "height", "width", "cube", "xAxis", "filters", "chartType", "scope", "loading"], outputs: ["loadingChange", "explore"] }, { kind: "component", type: CubeChartComponent, selector: "bizdoc-cube-chart", inputs: ["width", "height", "cube", "xAxis", "series", "indices", "filters", "yAxis", "chartType", "indicesChartType", "scope", "loading", "palettes"], outputs: ["explore", "loadingChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ChartViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ChartViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <!--<div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ChartViewDesignComponent = __decorate([
     BizDoc({ selector: 'analysis-view-designer' })
 ], ChartViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ChartViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form *ngIf=\"cubes.length; else none\" 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 (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n<ng-template #none></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <!--<div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
+class IconPickerComponent {
+    constructor(ngControl, _overlay, _http, _vc, _element, _dir) {
+        this.ngControl = ngControl;
+        this._overlay = _overlay;
+        this._http = _http;
+        this._vc = _vc;
+        this._element = _element;
+        this._dir = _dir;
+        this.id = `color-picker-${IconPickerComponent.nextId++}`;
+        this.errorState = false;
+        this.describedBy = '';
+        this.focused = false;
+        this.valueChanges = new EventEmitter();
+        this.categories = [];
+        this.filter = new FormControl(null);
+        this._required = false;
+        this._disabled = false;
+        this.stateChanges = new Subject();
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get value() { return this._value; }
+    set value(val) {
+        this._value = val;
+        this._onChange && this._onChange(val);
+        this.valueChanges.next(val);
+        this.stateChanges.next();
+    }
+    get empty() {
+        return this._value === null;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(req) {
+        this._required = req;
+        this.stateChanges.next();
+    }
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        this._disabled = value;
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    writeValue(obj) {
+        this._value = obj;
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick(_event) {
+        this._onTouched && this._onTouched();
+        this.open();
+    }
+    ngOnInit() {
+        if (!IconPickerComponent.icons)
+            this._http.get('/assets/system/icons.json').subscribe(e => {
+                IconPickerComponent.icons = e;
+                this._list(e);
+            });
+        else
+            this._list(IconPickerComponent.icons);
+        this.filter.valueChanges.
+            pipe(debounceTime$1(150)).
+            subscribe(v => this._list(IconPickerComponent.icons.filter(i => i.tags.findIndex(t => t.indexOf(v) > -1) > -1)));
+    }
+    _list(e) {
+        e.forEach(i => i.categories.forEach(c => {
+            if (this.categories[c])
+                this.categories[c].items.push(i);
+            else
+                this.categories.push(this.categories[c] = { items: [i] });
+        }));
+    }
+    open() {
+        this._overlayRef = this._overlay.create({
+            positionStrategy: this._overlay.position().flexibleConnectedTo(this._element).withPositions([{
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top'
+                }, {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom'
+                }]),
+            hasBackdrop: true,
+            direction: this._dir.value,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'home-panel'
+        });
+        const portal = new TemplatePortal(this.panel, this._vc);
+        this._overlayRef.attach(portal);
+        merge(this._overlayRef.backdropClick(), this._overlayRef.keydownEvents().pipe(filter$1(k => k.keyCode === ESCAPE))).subscribe(() => this._overlayRef.detach());
+    }
+    _trackBy(index, el) {
+        return el.name;
+    }
+    _clear() { }
+    close() {
+        this._overlayRef.detach();
+    }
+    _pick(icon) {
+        this.value = icon.name;
+        this.close();
+    }
+}
+IconPickerComponent.nextId = 0;
+IconPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IconPickerComponent, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i1$2.Overlay }, { token: i1.HttpClient }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i3$3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+IconPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: { value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" />\r\n    <div *ngFor=\"let c of categories; trackBy: _trackBy\">\r\n      <span></span>\r\n      <div>\r\n        <mat-icon *ngFor=\"let i of c.items; trackBy: _trackBy\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IconPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizdoc-icon-picker', template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" />\r\n    <div *ngFor=\"let c of categories; trackBy: _trackBy\">\r\n      <span></span>\r\n      <div>\r\n        <mat-icon *ngFor=\"let i of c.items; trackBy: _trackBy\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i2$1.NgControl, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Self
+                    }] }, { type: i1$2.Overlay }, { type: i1.HttpClient }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i3$3.Directionality }];
+    }, propDecorators: { id: [{
+                type: HostBinding
+            }], value: [{
+                type: Input
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], describedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], valueChanges: [{
+                type: Output
+            }], panel: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
 class PrivilegesDesignComponent {
-    constructor(_fb, _session, _service) {
+    constructor(_fb, _service, _ref) {
         this._fb = _fb;
-        this._session = _session;
         this._service = _service;
+        this._ref = _ref;
         this.change = new EventEmitter();
         this.form = this._fb.group({
             rule: null,
@@ -31065,8 +31467,12 @@ class PrivilegesDesignComponent {
         });
     }
     ngOnInit() {
-        this._service.roles().subscribe(r => this.roles = r //.concat(this._session.profile.roles)
-        );
+        this._service.roles().subscribe(r => this.roles = r.
+            concat(this._ref.model.roles.map(r => ({
+            name: r.name,
+            title: r.title,
+            dataType: r.dataType
+        }))));
         this.form.patchValue(this.model);
         this.form.valueChanges.subscribe(v => Object.assign(this.model, v));
     }
@@ -31074,26 +31480,29 @@ class PrivilegesDesignComponent {
         this.form.get('roles').setValue(evt.options.map(o => o.value));
     }
 }
-PrivilegesDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PrivilegesDesignComponent, deps: [{ token: i2$1.FormBuilder }, { token: SessionService }, { token: SystemService }], target: i0.ɵɵFactoryTarget.Component });
+PrivilegesDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PrivilegesDesignComponent, deps: [{ token: i2$1.FormBuilder }, { token: SystemService }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
 PrivilegesDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: { model: "model" }, outputs: { change: "change" }, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n  <mat-selection-list (selectionChange)=\"rolesChange($event)\" multiple *ngIf=\"roles\">\r\n    <mat-list-option *ngFor=\"let r of roles\" [selected]=\"model?.roles?.indexOf(r.name) > -1\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n    <!--[disabled]=\"false\"-->\r\n  </mat-selection-list>\r\n  <!--<mat-form-field>\r\n    <mat-label>{{'Roles'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roles\" multiple>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n    </mat-select>\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</form>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$5.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$5.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "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: "14.0.3", ngImport: i0, type: PrivilegesDesignComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-privileges', template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n  <mat-selection-list (selectionChange)=\"rolesChange($event)\" multiple *ngIf=\"roles\">\r\n    <mat-list-option *ngFor=\"let r of roles\" [selected]=\"model?.roles?.indexOf(r.name) > -1\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n    <!--[disabled]=\"false\"-->\r\n  </mat-selection-list>\r\n  <!--<mat-form-field>\r\n    <mat-label>{{'Roles'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roles\" multiple>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n    </mat-select>\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</form>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: SessionService }, { type: SystemService }]; }, propDecorators: { model: [{
+        }], ctorParameters: function () {
+        return [{ type: i2$1.FormBuilder }, { type: SystemService }, { type: DesignerRef, decorators: [{
+                        type: Inject,
+                        args: [DesignerRef]
+                    }] }];
+    }, propDecorators: { model: [{
                 type: Input
             }], change: [{
                 type: Output
             }] } });
 
-let FormDesignComponent = class FormDesignComponent extends DesignerElementComponent {
+let FormDesignComponent = class FormDesignComponent extends DesignerTypeElementComponent {
     constructor(fb, _router, _service, _session, ref) {
         super(fb, ref);
         this._router = _router;
         this._service = _service;
         this._session = _session;
-        this.form = this._fb.group({
-            rules: this._fb.array([])
-        });
+        this.rules = this._fb.array([]);
         this.theme = this._session.theme.dark ? 'MaterialDark' : 'Material';
         this.axisSettings = {
             lineSettings: {},
@@ -31120,10 +31529,32 @@ let FormDesignComponent = class FormDesignComponent extends DesignerElementCompo
         });
     }
     ngOnInit() {
+        this.form.addControl('rules', this._fb.control(null), { emitEvent: false });
+        this.form.addControl('icon', this._fb.control(this.model.icon), { emitEvent: false });
+        this.form.addControl('_rules', this.rules, { emitEvent: false });
         if (!this.model.privileges)
             this.model.privileges = {};
         this._service.range(this.model.name).subscribe(r => this.usage = r);
-        this.rules = this.model.rules ? Object.keys(this.model.rules).map(r => { }) : [];
+        this.model.rules && this.rules.setValue(Object.keys(this.model.rules).
+            map(r => {
+            const rule = this.model.rules[r];
+            return {
+                name: r,
+                value: rule.roles || [],
+                rule: rule.rule,
+                title: rule.title
+            };
+        }));
+        this.rules.valueChanges.pipe().subscribe(v => {
+            const rules = {};
+            v.forEach((r) => rules[r.name] = {
+                title: r.title,
+                roles: r.roles,
+                rule: r.rule,
+            });
+            this.form.get('rules').setValue(rules);
+        });
+        super.ngOnInit();
     }
     _formrule(name, permission) {
         return this._fb.group({
@@ -31134,27 +31565,30 @@ let FormDesignComponent = class FormDesignComponent extends DesignerElementCompo
     diagram() {
         this._router.navigate(['admin/forms', this.model.name]);
     }
+    design() {
+        this._router.navigate(['admin/utilities/form-designer'], { queryParams: { formId: this.model.name } });
+    }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
 };
-FormDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignComponent, deps: [{ token: i2$1.FormBuilder }, { token: RouterImpl }, { token: SystemService }, { token: SessionService }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-FormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n    <!--\r\n                   [theme]=\"theme\"\r\n                   [axisSettings]=\"axisSettings\"\r\n      -->\r\n\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                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\r\n                 [enableRtl]=\"enableRtl\">\r\n  </ejs-sparkline>\r\n  <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\"><mat-icon>schema</mat-icon></button>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignComponent, deps: [{ token: i2$1.FormBuilder }, { token: PanesRouter }, { token: SystemService }, { token: SessionService }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
+FormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <div>\r\n      <!--<mat-label>{{'Icon'|translate}}</mat-label>-->\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    </div>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <!--\r\n                 [theme]=\"theme\"\r\n                 [axisSettings]=\"axisSettings\"\r\n    -->\r\n\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                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\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 (click)=\"design()\" [bizdocTooltip]=\"'Designer'|translate\" [disabled]=\"model.draft\" *ngIf=\"model.type==='BizDoc.Configuration.Forms.Box'\"><mat-icon>design_services</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FormDesignComponent = __decorate([
     BizDoc({ selector: 'form-designer' })
 ], FormDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n    <!--\r\n                   [theme]=\"theme\"\r\n                   [axisSettings]=\"axisSettings\"\r\n      -->\r\n\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                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\r\n                 [enableRtl]=\"enableRtl\">\r\n  </ejs-sparkline>\r\n  <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\"><mat-icon>schema</mat-icon></button>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <div>\r\n      <!--<mat-label>{{'Icon'|translate}}</mat-label>-->\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    </div>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <!--\r\n                 [theme]=\"theme\"\r\n                 [axisSettings]=\"axisSettings\"\r\n    -->\r\n\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                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\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 (click)=\"design()\" [bizdocTooltip]=\"'Designer'|translate\" [disabled]=\"model.draft\" *ngIf=\"model.type==='BizDoc.Configuration.Forms.Box'\"><mat-icon>design_services</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () {
-        return [{ type: i2$1.FormBuilder }, { type: RouterImpl }, { type: SystemService }, { type: SessionService }, { type: DesignerRef, decorators: [{
+        return [{ type: i2$1.FormBuilder }, { type: PanesRouter }, { type: SystemService }, { type: SessionService }, { type: DesignerRef, decorators: [{
                         type: Inject,
                         args: [DesignerRef]
                     }] }];
     } });
 
-let CubeDesignComponent = class CubeDesignComponent extends DesignerElementComponent {
+let CubeDesignComponent = class CubeDesignComponent extends DesignerTypeElementComponent {
     constructor(fb, _service, _ps, ref) {
         super(fb, ref);
         this._service = _service;
@@ -31162,19 +31596,25 @@ let CubeDesignComponent = class CubeDesignComponent extends DesignerElementCompo
         this.views = this._fb.array([]);
         this.axes = this._fb.array([]);
         this.indices = this._fb.array([]);
+        this.patterns = this._fb.array([]);
         this.secondaryAxes = [];
-        this.form = this._fb.group({
-            views: this.views,
-            indices: this.indices,
-            axes: this.axes,
-            scope: null
-        });
+        this.syncing = false;
         this.types = ref.model.types;
     }
     sync() {
-        this._service.synchrinize(this.model.name);
+        this.syncing = true;
+        this._service.synchrinize(this.model.name).subscribe(() => this.syncing = false, () => {
+            this.syncing = false;
+            this._ps.error();
+        });
     }
     ngOnInit() {
+        this.form.addControl('patterns', this._fb.control(this.model.patterns, Validators.required), { emitEvent: false });
+        this.form.addControl('views', this._fb.control(this.model.views, Validators.required), { emitEvent: false });
+        this.form.addControl('indices', this._fb.control(this.model.indices, Validators.required), { emitEvent: false });
+        this.form.addControl('axes', this._fb.control(this.model.axes, Validators.required), { emitEvent: false });
+        this.form.addControl('scope', this._fb.control(this.model.scope, Validators.required), { emitEvent: false });
+        this.form.addControl('anomaly', this._fb.control(this.model.anomaly, Validators.required), { emitEvent: false });
         this.model.axes.forEach(a => {
             this.axes.push(this._formaxis(a), { emitEvent: true });
         });
@@ -31224,6 +31664,7 @@ let CubeDesignComponent = class CubeDesignComponent extends DesignerElementCompo
         return this._fb.group({
             name: this._fb.control(model.name),
             title: model.title,
+            icon: model.icon,
             xAxis: this._fb.control(model.xAxis, Validators.required),
             series: model.series,
             indices: model.indices,
@@ -31267,13 +31708,13 @@ let CubeDesignComponent = class CubeDesignComponent extends DesignerElementCompo
     }
 };
 CubeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeDesignComponent, deps: [{ token: i2$1.FormBuilder }, { token: SystemService }, { token: PromptService }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-CubeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <!-- Axes -->\r\n    <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n    <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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>\r\n          <mat-label>{{'DataType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"dataType\" required>\r\n            <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Indices -->\r\n    <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n    <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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        <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Views -->\r\n    <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n    <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n      <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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>\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        &nbsp;\r\n        <mat-form-field *ngIf=\"isChart(index)\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n            <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Series'|translate}}</mat-label>\r\n          <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n            <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n      <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">{{'Synchronize'|translate}}</button>\r\n  <!--<mat-spinner *ngIf=\"false\" diameter=\"20\"></mat-spinner>-->\r\n  <div class=\"row\">\r\n    <div>\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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(a.dataType)}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div>\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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div>\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".flex{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+CubeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <!-- Axes -->\r\n    <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n    <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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>\r\n          <mat-label>{{'DataType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"dataType\" required>\r\n            <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Indices -->\r\n    <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n    <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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        <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Views -->\r\n    <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n    <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n      <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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        <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n        &nbsp;\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        &nbsp;\r\n        <mat-form-field *ngIf=\"isChart(index)\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n            <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Series'|translate}}</mat-label>\r\n          <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n            <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n      <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">\r\n    <span> {{'Synchronize'|translate}}</span>\r\n    <mat-spinner *ngIf=\"syncing\" diameter=\"20\"></mat-spinner>\r\n  </button>\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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.views.length\">\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 CubeDesignComponent = __decorate([
     BizDoc({ selector: 'cube-designer' })
 ], CubeDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <!-- Axes -->\r\n    <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n    <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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>\r\n          <mat-label>{{'DataType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"dataType\" required>\r\n            <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Indices -->\r\n    <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n    <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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        <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Views -->\r\n    <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n    <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n      <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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>\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        &nbsp;\r\n        <mat-form-field *ngIf=\"isChart(index)\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n            <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Series'|translate}}</mat-label>\r\n          <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n            <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n      <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">{{'Synchronize'|translate}}</button>\r\n  <!--<mat-spinner *ngIf=\"false\" diameter=\"20\"></mat-spinner>-->\r\n  <div class=\"row\">\r\n    <div>\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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(a.dataType)}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div>\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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div>\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".flex{flex:1}\n"] }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <!-- Axes -->\r\n    <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n    <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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>\r\n          <mat-label>{{'DataType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"dataType\" required>\r\n            <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Indices -->\r\n    <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n    <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropAxis($event)\">\r\n      <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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        <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <!-- Views -->\r\n    <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n    <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n      <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag cdkDragRootElement=\".drag\">\r\n        <mat-icon class=\"drag\">drag_indicator</mat-icon>\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        <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n        &nbsp;\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        &nbsp;\r\n        <mat-form-field *ngIf=\"isChart(index)\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n            <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Series'|translate}}</mat-label>\r\n          <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n            <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n      <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">\r\n    <span> {{'Synchronize'|translate}}</span>\r\n    <mat-spinner *ngIf=\"syncing\" diameter=\"20\"></mat-spinner>\r\n  </button>\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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(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.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.views.length\">\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: i2$1.FormBuilder }, { type: SystemService }, { type: PromptService }, { type: DesignerRef, decorators: [{
                         type: Inject,
@@ -31281,71 +31722,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     }] }];
     } });
 
-let WidgetDesignComponent = class WidgetDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-        });
-    }
+let WidgetDesignComponent = class WidgetDesignComponent extends DesignerTypeElementComponent {
 };
 WidgetDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: WidgetDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-WidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: WidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
+WidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: WidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
 WidgetDesignComponent = __decorate([
     BizDoc({ selector: 'widget-designer' })
 ], WidgetDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: WidgetDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let ActionDesignComponent = class ActionDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-        });
-    }
+let ActionDesignComponent = class ActionDesignComponent extends DesignerTypeElementComponent {
 };
 ActionDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ActionDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ActionDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field >\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field >\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ActionDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ActionDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ActionDesignComponent = __decorate([
     BizDoc({ selector: 'action-designer' })
 ], ActionDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ActionDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field >\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field >\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let ReportDesignComponent = class ReportDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-        });
-    }
+let ReportDesignComponent = class ReportDesignComponent extends DesignerTypeElementComponent {
     ngOnInit() {
+        this.form.addControl('icon', this._fb.control(this.model.icon), { emitEvent: false });
+        super.ngOnInit();
     }
 };
 ReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  </form>\r\n    <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
+ReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
 ReportDesignComponent = __decorate([
     BizDoc({ selector: 'report-designer' })
 ], ReportDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ReportDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  </form>\r\n    <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let ViewDesignComponent = class ViewDesignComponent extends DesignerElementComponent {
     constructor() {
         super(...arguments);
-        this.form = this._fb.group({});
-    }
-    ngOnInit() {
+        this.form = this._fb.group({
+            name: null,
+            title: this._fb.control(null, Validators.required),
+        });
     }
 };
 ViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -31358,24 +31781,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
             args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let TypeDesignComponent = class TypeDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-            assignable: false,
-        });
+let TypeDesignComponent = class TypeDesignComponent extends DesignerTypeElementComponent {
+    ngOnInit() {
+        this.form.addControl('assignable', this._fb.control(this.model.assignable, Validators.required), { emitEvent: false });
+        super.ngOnInit();
     }
 };
 TypeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TypeDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TypeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <!--<button mat-stroked-button (click)=\"test()\">{{'Test'|translate}}</button>-->\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+TypeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 TypeDesignComponent = __decorate([
     BizDoc({ selector: 'type-designer' })
 ], TypeDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TypeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <!--<button mat-stroked-button (click)=\"test()\">{{'Test'|translate}}</button>-->\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let AnalysisWidgetDesignComponent = class AnalysisWidgetDesignComponent extends DesignerCubeElementComponent {
@@ -31403,13 +31822,13 @@ let AnalysisWidgetDesignComponent = class AnalysisWidgetDesignComponent extends
     }
 };
 AnalysisWidgetDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AnalysisWidgetDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AnalysisWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AnalysisWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form *ngIf=\"cubes.length; else none\" 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 (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n<ng-template #none>{{''}}</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeAccumulationChartComponent, selector: "bizdoc-cube-accum", inputs: ["palettes", "height", "width", "cube", "xAxis", "filters", "chartType", "scope", "loading"], outputs: ["loadingChange", "explore"] }, { kind: "component", type: CubeChartComponent, selector: "bizdoc-cube-chart", inputs: ["width", "height", "cube", "xAxis", "series", "indices", "filters", "yAxis", "chartType", "indicesChartType", "scope", "loading", "palettes"], outputs: ["explore", "loadingChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+AnalysisWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AnalysisWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "component", type: CubeAccumulationChartComponent, selector: "bizdoc-cube-accum", inputs: ["palettes", "height", "width", "cube", "xAxis", "filters", "chartType", "scope", "loading"], outputs: ["loadingChange", "explore"] }, { kind: "component", type: CubeChartComponent, selector: "bizdoc-cube-chart", inputs: ["width", "height", "cube", "xAxis", "series", "indices", "filters", "yAxis", "chartType", "indicesChartType", "scope", "loading", "palettes"], outputs: ["explore", "loadingChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 AnalysisWidgetDesignComponent = __decorate([
     BizDoc({ selector: 'analysis-widget-designer' })
 ], AnalysisWidgetDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AnalysisWidgetDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form *ngIf=\"cubes.length; else none\" 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 (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n<ng-template #none>{{''}}</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\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\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Pie\">{{'Pie'|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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|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=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <div *ngIf=\"args.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"args.filters\"\r\n                         [xAxis]=\"args.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"args.xAxis\"\r\n                         [series]=\"args.series\"\r\n                         [indices]=\"args.indices\"\r\n                         [filters]=\"args.filters\"\r\n                         [chartType]=\"args.chartType\"\r\n                         [indicesChartType]=\"args.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"args.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let ExploreViewDesignComponent = class ExploreViewDesignComponent extends DesignerCubeElementComponent {
@@ -31570,13 +31989,13 @@ let UsageReportDesignComponent = class UsageReportDesignComponent extends Design
     }
 };
 UsageReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UsageReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UsageReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\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=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n  <div>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+UsageReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UsageReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\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=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 UsageReportDesignComponent = __decorate([
     BizDoc({ selector: 'usage-report-designer' })
 ], UsageReportDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageReportDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\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=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n  <div>\r\n  </div>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\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=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let AnomalyRuleDesignComponent = class AnomalyRuleDesignComponent extends DesignerElementComponent {
@@ -31603,6 +32022,10 @@ let BoxFormDesignComponent = class BoxFormDesignComponent extends DesignerElemen
         this.form = this._fb.group({});
     }
     ngOnInit() {
+        if (!this.args.sections)
+            this.args.sections = [];
+        if (!this.model.icon)
+            this.model.icon = 'description';
     }
 };
 BoxFormDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BoxFormDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -31653,66 +32076,61 @@ let PivotViewDesignComponent = class PivotViewDesignComponent extends DesignerCu
     }
 };
 PivotViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PivotViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PivotViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PivotViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\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        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+PivotViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PivotViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\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        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 PivotViewDesignComponent = __decorate([
     BizDoc({ selector: 'pivot-view-designer' })
 ], PivotViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PivotViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\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        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</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 (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\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        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
-let UtilityDesignComponent = class UtilityDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({});
-    }
+let UtilityDesignComponent = class UtilityDesignComponent extends DesignerTypeElementComponent {
     ngOnInit() {
+        this.form.addControl('icon', this._fb.control(null), { emitEvent: false });
+        super.ngOnInit();
     }
 };
 UtilityDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UtilityDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UtilityDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UtilityDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
+UtilityDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UtilityDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
 UtilityDesignComponent = __decorate([
     BizDoc({ selector: 'utility-designer' })
 ], UtilityDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UtilityDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let FolderDesignComponent = class FolderDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-        });
+let FolderDesignComponent = class FolderDesignComponent extends DesignerTypeElementComponent {
+    ngOnInit() {
+        this.form.addControl('icon', this._fb.control(this.model.icon), { emitEvent: false });
+        super.ngOnInit();
     }
 };
 FolderDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FolderDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FolderDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FolderDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field >\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field >\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n    <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FolderDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FolderDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <div>\r\n      <!--<mat-label>{{'Icon'|translate}}</mat-label>-->\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FolderDesignComponent = __decorate([
     BizDoc({ selector: 'folder-designer' })
 ], FolderDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FolderDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field >\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field >\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n    <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <div>\r\n      <!--<mat-label>{{'Icon'|translate}}</mat-label>-->\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let GuideDesignComponent = class GuideDesignComponent extends DesignerElementComponent {
+let GuideDesignComponent = class GuideDesignComponent extends DesignerTypeElementComponent {
     constructor() {
         super(...arguments);
         this.steps = this._fb.array([]);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-            steps: this.steps
-        });
     }
     ngOnInit() {
+        super.ngOnInit();
+        this.form.addControl('steps', this.steps);
         if (!this.model.privileges)
             this.model.privileges = {};
-        this.model.steps.forEach(s => this.steps.push(this._stepform(s), { emitEvent: false }));
+        if (!this.model.steps)
+            this.model.steps = [];
+        else
+            this.model.steps.forEach(s => this.steps.push(this._stepform(s), { emitEvent: false }));
     }
     drop(event) {
         moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
@@ -31737,58 +32155,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
             args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field 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-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <h2 class=\"mat-title\">{{'Steps'|translate}}</h2>\r\n    </mat-form-field>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <dl>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n  </dl>\r\n</ng-template>\r\n" }]
         }] });
 
-let RuleDesignComponent = class RuleDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({});
-    }
+let RuleDesignComponent = class RuleDesignComponent extends DesignerTypeElementComponent {
 };
 RuleDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RuleDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RuleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RuleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+RuleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RuleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 RuleDesignComponent = __decorate([
     BizDoc({ selector: 'rule-designer' })
 ], RuleDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RuleDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"args\" (modelChange)=\"assignargs($event)\"></bizdoc-layout>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let RoleDesignComponent = class RoleDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-        });
+let RoleDesignComponent = class RoleDesignComponent extends DesignerTypeElementComponent {
+    ngOnInit() {
+        this.types = this._ref.model.types.filter(t => t.assignable);
+        this.form.addControl('dataType', this._fb.control(this.model.dataType, Validators.required), { emitEvent: false });
+        super.ngOnInit();
     }
 };
 RoleDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RoleDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RoleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RoleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field >\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field >\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+RoleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RoleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd></dd>\r\n    </dl>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 RoleDesignComponent = __decorate([
     BizDoc({ selector: 'role-designer' })
 ], RoleDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RoleDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field >\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field >\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd></dd>\r\n    </dl>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let StateDesignComponent = class StateDesignComponent extends DesignerElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            name: null,
-            title: null,
-        });
+let StateDesignComponent = class StateDesignComponent extends DesignerTypeElementComponent {
+    ngOnInit() {
+        this.form.addControl('color', this._fb.control(this.model.color), { emitEvent: false });
+        this.form.addControl('backgroundColor', this._fb.control(this.model.color), { emitEvent: false });
+        super.ngOnInit();
     }
 };
 StateDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StateDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Color'|translate}}</mat-label>\r\n      <input matInput formControlName=\"color\" />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'BackgroundColor'|translate}}</mat-label>\r\n      <input matInput formControlName=\"backgroundColor\" />\r\n    </mat-form-field>\r\n      <!--<bizdoc-color-picker formControlName=\"backgroundColor\" ></bizdoc-color-picker>-->\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 StateDesignComponent = __decorate([
     BizDoc({ selector: 'state-designer' })
 ], StateDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StateDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Color'|translate}}</mat-label>\r\n      <input matInput formControlName=\"color\" />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'BackgroundColor'|translate}}</mat-label>\r\n      <input matInput formControlName=\"backgroundColor\" />\r\n    </mat-form-field>\r\n      <!--<bizdoc-color-picker formControlName=\"backgroundColor\" ></bizdoc-color-picker>-->\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let ReturnToRoleActionDesignComponent = class ReturnToRoleActionDesignComponent extends DesignerElementComponent {
@@ -31817,10 +32227,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     }] }];
     } });
 
+let configurationDatasourceDesignComponent = class configurationDatasourceDesignComponent extends DesignerElementComponent {
+    constructor() {
+        super(...arguments);
+        this.items = this._fb.array([]);
+        this.form = this._fb.group({
+            items: this._fb.group({})
+        });
+    }
+    ngOnInit() {
+        if (!this.args.items)
+            this.args.items = {};
+        Object.keys(this.args.items).forEach(k => this.items.push(this._form(k, this.args.items[k])));
+        this.items.valueChanges.pipe(debounceTime$1(150)).
+            subscribe(v => this._tomap(v));
+    }
+    _tomap(varray) {
+        const items = {};
+        varray.forEach(v => items[v.key] = v.value);
+        this.form.get('items').setValue(items);
+    }
+    add() {
+        this._form(null, null);
+    }
+    _form(key, value) {
+        return this._fb.group({
+            key: this._fb.control(key, Validators.required),
+            value: this._fb.control(value, Validators.required)
+        });
+    }
+    drop(event) {
+        const array = this.items.value;
+        moveItemInArray(array, event.previousIndex, event.currentIndex);
+        this._tomap(array);
+    }
+};
+configurationDatasourceDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: configurationDatasourceDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+configurationDatasourceDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: configurationDatasourceDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <div>\r\n      <!--<mat-label>{{'Icon'|translate}}</mat-label>-->\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+configurationDatasourceDesignComponent = __decorate([
+    BizDoc({ selector: 'configuration-datasource-designer' })
+], configurationDatasourceDesignComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: configurationDatasourceDesignComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <div>\r\n      <!--<mat-label>{{'Icon'|translate}}</mat-label>-->\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    </div>\r\n  </form>\r\n  <bizdoc-privileges (change)=\"change.emit()\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+        }] });
+
 const SYSTEM_COMPONENTS = [RoleNodeComponent, ManageCubeIndexUtility, PermissionsUtility, PositionsComponent, ProfilerComponent,
     PatternsComponent, SystemDiffComponent, DocumentTraceComponent, ConfigurationDesignerComponent, FormDesignerComponent];
 const DESINER_COMPONENTS = [StateDesignComponent, RoleDesignComponent, FormDesignComponent, RuleDesignComponent, ReportDesignComponent, GuideDesignComponent, UtilityDesignComponent, FolderDesignComponent, WidgetDesignComponent, ActionDesignComponent, DocumentsWidgetDesignComponent, CubeDesignComponent, ViewDesignComponent, TypeDesignComponent, ReportDesignComponent,
-    ReturnToRoleActionDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsReportDesignComponent, PerformanceWidgetDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent, PivotViewDesignComponent];
+    configurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsReportDesignComponent, PerformanceWidgetDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent, PivotViewDesignComponent];
 class SystemModule {
     static forChild() {
         registerComponents(SYSTEM_COMPONENTS);
@@ -31834,8 +32289,9 @@ class SystemModule {
 SystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: SystemModule, declarations: [
         /** design */
+        IconPickerComponent,
         StateDesignComponent, RoleDesignComponent, GuideDesignComponent, RuleDesignComponent, ReportDesignComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, CubeDesignComponent, ActionDesignComponent, ReportDesignComponent, ViewDesignComponent, TypeDesignComponent,
-        ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
+        configurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
         /** utilities */
         ConfigurationDesignerComponent, FormDesignerComponent, DesignerItemComponent,
         PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
@@ -31876,8 +32332,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
             args: [{
                     declarations: [
                         /** design */
+                        IconPickerComponent,
                         StateDesignComponent, RoleDesignComponent, GuideDesignComponent, RuleDesignComponent, ReportDesignComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, CubeDesignComponent, ActionDesignComponent, ReportDesignComponent, ViewDesignComponent, TypeDesignComponent,
-                        ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
+                        configurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
                         /** utilities */
                         ConfigurationDesignerComponent, FormDesignerComponent, DesignerItemComponent,
                         PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
@@ -32098,5 +32555,5 @@ function withRoute(routes) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BackNavigation, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, CollapseNavigation, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePerformanceWidget, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, HelpTipComponent, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationClose, NavigationEnd, NavigationExpand, NavigationFocus, NavigationMode, NavigationResize, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, cleanup, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
+export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BackNavigation, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, CollapseNavigation, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePerformanceWidget, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, HelpTipComponent, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationClose, NavigationEnd, NavigationExpand, NavigationFocus, NavigationMode, NavigationResize, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, cleanup$1 as cleanup, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
 //# sourceMappingURL=bizdoc-core.mjs.map