@bizdoc/core 1.17.10 → 1.17.11

package/fesm2015/bizdoc-core.mjs

@@ -1,22 +1,12 @@
 import { __awaiter, __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Inject, Directive, TemplateRef, Injector, ViewContainerRef, Component, ViewChild, Input, Pipe, Optional, Self, HostBinding, Output, EventEmitter, HostListener, ElementRef, NgModule, ViewChildren, Host, SkipSelf, ViewEncapsulation, APP_INITIALIZER, ContentChild } from '@angular/core';
+import { Injectable, Directive, InjectionToken, Inject, TemplateRef, Injector, ViewContainerRef, Component, ViewChild, Input, Pipe, Optional, Self, HostBinding, EventEmitter, Output, HostListener, ElementRef, NgModule, ViewChildren, Host, SkipSelf, ViewEncapsulation, APP_INITIALIZER, ContentChild } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { Validators, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { map, shareReplay, tap, filter, takeUntil as takeUntil$1, debounceTime, switchMap, take, first, catchError, startWith, finalize } from 'rxjs/operators';
+import { map, shareReplay, tap as tap$1, filter, takeUntil as takeUntil$1, debounceTime, switchMap, take, first, catchError, startWith, finalize } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import { HttpRequest, HttpResponse, HttpEventType, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { Subject, Observable, of, fromEvent, forkJoin, takeUntil, BehaviorSubject, map as map$1, shareReplay as shareReplay$1, tap as tap$1, interval, takeWhile, filter as filter$1, debounceTime as debounceTime$1, from, merge, first as first$1, throwError, switchMap as switchMap$1, isObservable, EMPTY, startWith as startWith$1 } from 'rxjs';
-import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
-import dayjs from 'dayjs';
-import * as firebase from 'firebase/app';
-import { getMessaging, deleteToken, getToken } from 'firebase/messaging';
-import * as i2 from 'ngx-cookie-service';
-import { CookieService } from 'ngx-cookie-service';
-import * as i10 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/platform-browser';
-import { BrowserModule } from '@angular/platform-browser';
+import { shareReplay as shareReplay$1, tap, map as map$1, Subject, Observable, of, fromEvent, forkJoin, takeUntil, BehaviorSubject, interval, takeWhile, filter as filter$1, debounceTime as debounceTime$1, from, merge, first as first$1, throwError, switchMap as switchMap$1, isObservable, EMPTY, startWith as startWith$1 } from 'rxjs';
 import * as i1$4 from '@angular/common';
 import { registerLocaleData, CommonModule, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol, formatNumber, formatPercent, formatCurrency } from '@angular/common';
 import * as i3$1 from '@angular/material/core';
@@ -30,6 +20,16 @@ import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
 import * as i10$1 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
+import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
+import dayjs from 'dayjs';
+import * as firebase from 'firebase/app';
+import { getMessaging, deleteToken, getToken } from 'firebase/messaging';
+import * as i2 from 'ngx-cookie-service';
+import { CookieService } from 'ngx-cookie-service';
+import * as i10 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$1 from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 import * as i9 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i6 from '@angular/cdk/text-field';
@@ -805,6 +805,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
+class SystemService {
+    constructor(_http) {
+        this._http = _http;
+    }
+    rules(args) {
+        return this._http.get('/api/system/form/rules', { params: args });
+    }
+    synchrinize(name) {
+        return this._http.post(`/api/system/cube/${encodeURIComponent(name)}/synchronize`, {});
+    }
+    findAll(options) {
+        const params = {};
+        if (isString(options))
+            params['search'] = options;
+        else {
+            if (options.search)
+                params['search'] = options.search;
+            if (options.formId)
+                params['formId'] = options.formId;
+            if (options.start)
+                params['start'] = new Date(options.start).toISOString();
+            if (options.end)
+                params['end'] = new Date(options.end).toISOString();
+        }
+        return this._http.get('/api/system/form/findAll', {
+            params
+        });
+    }
+    roles() {
+        return SystemService._cache['roles'] || (SystemService._cache['roles'] =
+            this._http.get('/api/system/positions/roles').pipe(shareReplay$1()));
+    }
+    /**
+     *
+     * @param formId
+     */
+    range(formId) {
+        return this._http.get('/api/system/form/range', {
+            params: { formId: formId || null }
+        }).pipe(tap((r) => r.forEach(p => p.date = new Date(p.date))));
+    }
+    /**
+     *
+     * @param formId
+     * @param options
+     */
+    invite(formId, options) {
+        return this._http.put(`/api/system/form/invite/${formId}`, options);
+    }
+    projection(options) {
+        return this._http.put('/api/system/form/projection/', options);
+    }
+    cube(name) {
+        return this._http.get(`/api/system/cube/${encodeURIComponent(name)}`);
+    }
+    /**
+     *
+     * @param name
+     */
+    form(name) {
+        return this._http.get(`/api/system/form/${encodeURIComponent(name)}`);
+    }
+    controls() {
+        return this._controls || (this._controls = this._http.get(`/api/system/form/controls`).
+            pipe(tap(c => c.forEach(i => c[i.name] = i)), shareReplay$1()));
+    }
+    datatypes() {
+        return this._datatypes || (this._datatypes = this._http.get(`/api/system/form/datatypes`).
+            pipe(tap(t => t.forEach(i => t[i.name] = i)), shareReplay$1()));
+    }
+    save(form) {
+        const { workflow } = form;
+        return this._http.put(`/api/system/form/${encodeURIComponent(form.name)}`, { workflow });
+    }
+    typegroups() {
+        return this.datatypes().pipe(map$1(t => {
+            const defaultgroup = { elements: [] }, groups = [];
+            groups['_'] = defaultgroup;
+            t.forEach(t => {
+                if (t.family) {
+                    let group = groups[t.family];
+                    if (!group) {
+                        group = {
+                            title: t.family,
+                            elements: [t]
+                        };
+                        groups.push(group);
+                        groups[t.family] = group;
+                    }
+                    else
+                        group.elements.push(t);
+                }
+                else
+                    defaultgroup.elements.push(t);
+            });
+            return groups;
+        }));
+    }
+}
+SystemService._cache = {};
+SystemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SystemService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+SystemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SystemService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SystemService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
+class OptionsControlField {
+    constructor(_ds) {
+        this._ds = _ds;
+    }
+    ngOnInit() {
+        this.required && this.control.addValidators(Validators.required);
+        if (this.dataType)
+            this._ds.all(this.dataType).subscribe(v => this.options = v);
+    }
+    optionOf(value) {
+        var _a, _b;
+        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(o => o.key === value)) === null || _b === void 0 ? void 0 : _b.value;
+    }
+}
+OptionsControlField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlField, deps: [{ token: DatasourceService }], target: i0.ɵɵFactoryTarget.Directive });
+OptionsControlField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: OptionsControlField, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlField, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: DatasourceService }]; } });
+class OptionsControlDesigner {
+    constructor(_service) {
+        this._service = _service;
+        this._typeRequired = (control) => {
+            var _a, _b;
+            const options = (_a = control.parent) === null || _a === void 0 ? void 0 : _a.get('options');
+            if (options && !options.length && !((_b = control.parent) === null || _b === void 0 ? void 0 : _b.get('dataType').value))
+                return { required: true };
+            return null;
+        };
+        this._service.typegroups().subscribe(t => this.datatypes = t);
+    }
+}
+OptionsControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlDesigner, deps: [{ token: SystemService }], target: i0.ɵɵFactoryTarget.Directive });
+OptionsControlDesigner.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: OptionsControlDesigner, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlDesigner, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: SystemService }]; } });
+
 const BIZDOC_CONFIG = new InjectionToken('bizdoc');
 var OpenPolicy;
 (function (OpenPolicy) {
@@ -1110,11 +1254,11 @@ class SessionService {
     }
     /** update profile  */
     update(profile) {
-        return this._http.put('/api/account/update', profile).pipe(tap(() => Object.assign(this._profile.options, profile)));
+        return this._http.put('/api/account/update', profile).pipe(tap$1(() => Object.assign(this._profile.options, profile)));
     }
     /** mark guide as visited in profile */
     guide(name) {
-        return this._http.put(`/api/account/guide/${encodeURIComponent(name)}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap(() => {
+        return this._http.put(`/api/account/guide/${encodeURIComponent(name)}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap$1(() => {
             const guide = this._profile.guides.find(g => g.name === name);
             if (guide)
                 guide.mode = undefined;
@@ -1159,13 +1303,13 @@ class SessionService {
         });
     }
     inboxTouch() {
-        return this._http.put('/api/account/inboxview', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
+        return this._http.put('/api/account/inboxview', {}, { headers: { 'no-progress': 'true' } }).pipe(tap$1(e => {
             this.profile.inboxCount = 0;
             this.profile.options.inboxView = e.time;
         })).toPromise();
     }
     notificationsTouch() {
-        return this._http.put('/api/account/notificationsView', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
+        return this._http.put('/api/account/notificationsView', {}, { headers: { 'no-progress': 'true' } }).pipe(tap$1(e => {
             this.profile.notificationsCount = 0;
             this.profile.options.notificationsView = e.time;
         })).toPromise();
@@ -1236,44 +1380,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     }] }, { type: i1.HttpClient }, { type: i2.CookieService }, { type: HubService }, { type: i10.MatIconRegistry }, { type: i1$1.DomSanitizer }];
     } });
 
-class OptionsControlField {
-    constructor(_ds) {
-        this._ds = _ds;
-    }
-    ngOnInit() {
-        this.required && this.control.addValidators(Validators.required);
-        if (this.dataType)
-            this._ds.all(this.dataType).subscribe(v => this.options = v);
-    }
-    optionOf(value) {
-        var _a, _b;
-        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(o => o.key === value)) === null || _b === void 0 ? void 0 : _b.value;
-    }
-}
-OptionsControlField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlField, deps: [{ token: DatasourceService }], target: i0.ɵɵFactoryTarget.Directive });
-OptionsControlField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: OptionsControlField, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlField, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: DatasourceService }]; } });
-class OptionsControlDesigner {
-    constructor(_session) {
-        this._session = _session;
-        this._typeRequired = (control) => {
-            var _a, _b;
-            const options = (_a = control.parent) === null || _a === void 0 ? void 0 : _a.get('options');
-            if (options && !options.length && !((_b = control.parent) === null || _b === void 0 ? void 0 : _b.get('dataType').value))
-                return { required: true };
-            return null;
-        };
-        this.datatypes = this._session.profile.types;
-    }
-}
-OptionsControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlDesigner, deps: [{ token: SessionService }], target: i0.ɵɵFactoryTarget.Directive });
-OptionsControlDesigner.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: OptionsControlDesigner, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OptionsControlDesigner, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: SessionService }]; } });
-
 class PopupRef {
     constructor(_data) {
         this._data = _data;
@@ -2608,7 +2714,7 @@ class TranslateService {
     cldr(culture, files) {
         if ('en' === this._session.language)
             return Promise.resolve();
-        const observables = files.map(f => this._http.get('/assets/i18n/' + f.replace('{0}', culture)).pipe(tap(loadCldr)));
+        const observables = files.map(f => this._http.get('/assets/i18n/' + f.replace('{0}', culture)).pipe(tap$1(loadCldr)));
         return forkJoin(observables).toPromise();
     }
     get(key, ...args) {
@@ -2719,27 +2825,17 @@ class LocalizedStringComponent {
         this.ngControl = ngControl;
         this._session = _session;
         this._fb = _fb;
-        this.controlType = 'bizdoc-localized-string';
         this.class = 'column';
         this.group = this._fb.group({});
         this.multilingual = false;
         this._destroy = new Subject();
         this._required = false;
         this._disabled = false;
-        this.stateChanges = new Subject();
-        this.valueChanges = new Subject();
-        this.id = `localized-string-${LocalizedStringComponent.nextId++}`;
-        this.errorState = false;
-        this.describedBy = '';
         this.languages = this._session.languages.filter(l => l !== this._session.language);
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
     }
-    ngOnDestroy() {
-        this._destroy.next();
-        this._destroy.complete();
-    }
     writeValue(value) {
         this._value = value;
         if (this.control) {
@@ -2769,21 +2865,12 @@ class LocalizedStringComponent {
             this.multilingual = isObject(val);
         }
         this._onChange && this._onChange(val);
-        this.valueChanges.next(val);
-        this.stateChanges.next();
-    }
-    get empty() {
-        return this._value === null;
-    }
-    get shouldLabelFloat() {
-        return !this.empty;
     }
     get required() {
         return this._required;
     }
     set required(req) {
         this._required = coerceBooleanProperty(req);
-        this.stateChanges.next();
     }
     get disabled() { return this._disabled; }
     set disabled(value) {
@@ -2792,15 +2879,10 @@ class LocalizedStringComponent {
             this.group.disable();
         else
             this.group.enable();
-        this.stateChanges.next();
-    }
-    setDescribedByIds(ids) {
-        this.describedBy = ids.join(' ');
-    }
-    onContainerClick(_event) {
-        this._onTouched && this._onTouched();
     }
     ngOnInit() {
+        if (this.class.split(' ').indexOf('row') > -1)
+            this.floatLabel = 'never';
         this.multilingual = this._value && isObject(this._value);
         const currentLang = this._session.language;
         for (let lang of this._session.languages) {
@@ -2814,17 +2896,16 @@ class LocalizedStringComponent {
             subscribe(v => this.value = this.multilingual ? v : v[currentLang]);
     }
     focus() { this.controlInput.focus(); }
+    ngOnDestroy() {
+        this._destroy.next();
+        this._destroy.complete();
+    }
 }
-LocalizedStringComponent.nextId = 0;
 LocalizedStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-LocalizedStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: { class: "class", value: "value", placeholder: "placeholder", required: "required", disabled: "disabled", maxlength: "maxlength" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy", "class": "this.class" } }, viewQueries: [{ propertyName: "controlInput", first: true, predicate: ["controlInput"], descendants: true, read: MatInput }], ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <textarea cdkTextareaAutosize matInput [formControl]=\"control\" #controlInput [maxlength]=\"maxlength\" [required]=\"required\"></textarea>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:label\"></mat-error>\r\n  <button matSuffix mat-icon-button [disabled]=disabled [bizdocTooltip]=\"'Localize'|translate\" (click)=\"multilingual = !multilingual\"><mat-icon>translate</mat-icon></button>\r\n  <mat-hint align=\"end\" *ngIf=\"maxlength\">{{control.value?.length || 0}} / {{maxlength}}</mat-hint>\r\n</mat-form-field>\r\n<ng-container *ngIf=\"multilingual && languages.length\" [formGroup]=\"group\">\r\n  <mat-form-field *ngFor=\"let lang of languages;\">\r\n    <mat-label>{{placeholder}} / {{lang|translate}}</mat-label>\r\n    <textarea cdkTextareaAutosize matInput [formControlName]=\"lang\" [maxlength]=\"maxlength\"></textarea>\r\n  </mat-form-field>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+LocalizedStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: { class: "class", floatLabel: "floatLabel", value: "value", placeholder: "placeholder", required: "required", disabled: "disabled", maxlength: "maxlength" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "controlInput", first: true, predicate: ["controlInput"], descendants: true, read: MatInput }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <textarea cdkTextareaAutosize matInput [formControl]=\"control\" #controlInput [maxlength]=\"maxlength\" [required]=\"required\"></textarea>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:placeholder\"></mat-error>\r\n  <button matSuffix mat-icon-button [disabled]=disabled [bizdocTooltip]=\"'Localize'|translate\" (click)=\"multilingual = !multilingual\"><mat-icon>translate</mat-icon></button>\r\n  <mat-hint align=\"end\" *ngIf=\"maxlength\">{{control.value?.length || 0}} / {{maxlength}}</mat-hint>\r\n</mat-form-field>\r\n<ng-container *ngIf=\"multilingual && languages.length\" [formGroup]=\"group\">\r\n  <mat-form-field *ngFor=\"let lang of languages;\" [floatLabel]=\"floatLabel\">\r\n    <mat-label>{{placeholder}} / {{lang|translate}}</mat-label>\r\n    <textarea cdkTextareaAutosize matInput [formControlName]=\"lang\" [maxlength]=\"maxlength\"></textarea>\r\n  </mat-form-field>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-localized-string', host: {
-                        '[class.floating]': 'shouldLabelFloat',
-                        '[id]': 'id',
-                        '[attr.aria-describedby]': 'describedBy'
-                    }, template: "<mat-form-field>\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <textarea cdkTextareaAutosize matInput [formControl]=\"control\" #controlInput [maxlength]=\"maxlength\" [required]=\"required\"></textarea>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:label\"></mat-error>\r\n  <button matSuffix mat-icon-button [disabled]=disabled [bizdocTooltip]=\"'Localize'|translate\" (click)=\"multilingual = !multilingual\"><mat-icon>translate</mat-icon></button>\r\n  <mat-hint align=\"end\" *ngIf=\"maxlength\">{{control.value?.length || 0}} / {{maxlength}}</mat-hint>\r\n</mat-form-field>\r\n<ng-container *ngIf=\"multilingual && languages.length\" [formGroup]=\"group\">\r\n  <mat-form-field *ngFor=\"let lang of languages;\">\r\n    <mat-label>{{placeholder}} / {{lang|translate}}</mat-label>\r\n    <textarea cdkTextareaAutosize matInput [formControlName]=\"lang\" [maxlength]=\"maxlength\"></textarea>\r\n  </mat-form-field>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'bizdoc-localized-string', template: "<mat-form-field [floatLabel]=\"floatLabel\">\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <textarea cdkTextareaAutosize matInput [formControl]=\"control\" #controlInput [maxlength]=\"maxlength\" [required]=\"required\"></textarea>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:placeholder\"></mat-error>\r\n  <button matSuffix mat-icon-button [disabled]=disabled [bizdocTooltip]=\"'Localize'|translate\" (click)=\"multilingual = !multilingual\"><mat-icon>translate</mat-icon></button>\r\n  <mat-hint align=\"end\" *ngIf=\"maxlength\">{{control.value?.length || 0}} / {{maxlength}}</mat-hint>\r\n</mat-form-field>\r\n<ng-container *ngIf=\"multilingual && languages.length\" [formGroup]=\"group\">\r\n  <mat-form-field *ngFor=\"let lang of languages;\" [floatLabel]=\"floatLabel\">\r\n    <mat-label>{{placeholder}} / {{lang|translate}}</mat-label>\r\n    <textarea cdkTextareaAutosize matInput [formControlName]=\"lang\" [maxlength]=\"maxlength\"></textarea>\r\n  </mat-form-field>\r\n</ng-container>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$3.NgControl, decorators: [{
                         type: Optional
@@ -2835,27 +2916,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: HostBinding
             }, {
                 type: Input
+            }], floatLabel: [{
+                type: Input
             }], controlInput: [{
                 type: ViewChild,
                 args: ['controlInput', { read: MatInput }]
             }], value: [{
                 type: Input
-            }], valueChanges: [{
-                type: Output
-            }], id: [{
-                type: HostBinding
             }], placeholder: [{
                 type: Input
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floating']
             }], required: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], describedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
             }], maxlength: [{
                 type: Input
             }] } });
@@ -2895,41 +2968,65 @@ class ControlOptionsComponent {
     }
 }
 ControlOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ControlOptionsComponent, deps: [{ token: TranslateService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ControlOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: { form: "form", model: "model" }, ngImport: i0, template: "<h2 class=\"mat-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ControlOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: { form: "form", model: "model" }, ngImport: i0, template: "<h2 class=\"mat-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\" floatLabel=\"never\">\r\n      <input matInput [placeholder]=\"'Key'|l18n\" formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ControlOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-design-options', template: "<h2 class=\"mat-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'bizdoc-design-options', template: "<h2 class=\"mat-title row\">\r\n  {{'Options'|translate}}\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n</h2>\r\n<div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div *ngFor=\"let c of options.controls; index as index\" class=\"row\" [formGroup]=\"c\" cdkDrag>\r\n    <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n    <mat-form-field class=\"flex\" floatLabel=\"never\">\r\n      <input matInput [placeholder]=\"'Key'|l18n\" formControlName=\"key\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <bizdoc-localized-string formControlName=\"value\" required class=\"row flex\" [placeholder]=\"'Label'|l18n\"></bizdoc-localized-string>\r\n    <button mat-icon-button (click)=\"options.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$3.FormBuilder }]; }, propDecorators: { form: [{
                 type: Input
             }], model: [{
                 type: Input
             }] } });
 
-class LocalizedStringPipe {
-    constructor(_session) {
-        this._session = _session;
+class ArraySortPipe {
+    transform(array, field, order = 'asc') {
+        if (!Array.isArray(array)) {
+            return;
+        }
+        array.sort((a, b) => {
+            if (a[field] < b[field]) {
+                return order === 'asc' ? -1 : 1;
+            }
+            else if (a[field] > b[field]) {
+                return order === 'asc' ? 1 : -1;
+            }
+            else {
+                return 0;
+            }
+        });
+        return array;
     }
-    transform(value, ...args) {
+}
+ArraySortPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ArraySortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ArraySortPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: ArraySortPipe, name: "sort" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ArraySortPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "sort"
+                }]
+        }] });
+class FilterPipe {
+    transform(array, field, value) {
+        if (!Array.isArray(array))
+            return;
         if (!value)
-            return null;
-        if (isString(value))
-            return value;
-        let val = value[this._session.language];
-        if (val)
-            return val;
-        return Object.values(value)[0];
+            return array;
+        value = value.trim().toLowerCase();
+        return array.filter(i => i[field].toLowerCase().indexOf(value) > -1);
     }
 }
-LocalizedStringPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringPipe, deps: [{ token: SessionService }], target: i0.ɵɵFactoryTarget.Pipe });
-LocalizedStringPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringPipe, name: "localizedString" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringPipe, decorators: [{
+FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: FilterPipe, name: "filter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FilterPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'localizedString' }]
-        }], ctorParameters: function () { return [{ type: SessionService }]; } });
+            args: [{
+                    name: "filter"
+                }]
+        }] });
 
 let SelectControlDesigner = class SelectControlDesigner extends OptionsControlDesigner {
-    constructor(session, _fb) {
-        super(session);
+    constructor(service, _fb) {
+        super(service);
         this._fb = _fb;
         this.form = this._fb.group({
             label: null,
@@ -2943,20 +3040,27 @@ let SelectControlDesigner = class SelectControlDesigner extends OptionsControlDe
         this.model = model;
     }
 };
-SelectControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SelectControlDesigner, deps: [{ token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+SelectControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SelectControlDesigner, deps: [{ token: SystemService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
 SelectControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: SelectControlDesigner, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
    <form autocomplete="off" [formGroup]="form" class="column">
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
-    <mat-form-field>
+    <mat-form-field *ngIf="datatypes">
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType">
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title|localizedString}}</mat-option>
+        <mat-option *ngFor="let t of datatypes['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
       <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:('DataType'|translate)"></mat-error>
     </mat-form-field>
   <bizdoc-design-options [form]="form" [model]="model"></bizdoc-design-options>
       <mat-checkbox formControlName="multiple">{{'Multiple'|translate}}</mat-checkbox>
-</form>`, isInline: true, 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "component", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 SelectControlDesigner = __decorate([
     BizDoc({ selector: 'select-control-designer' })
 ], SelectControlDesigner);
@@ -2966,10 +3070,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     template: `
    <form autocomplete="off" [formGroup]="form" class="column">
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
-    <mat-form-field>
+    <mat-form-field *ngIf="datatypes">
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType">
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title|localizedString}}</mat-option>
+        <mat-option *ngFor="let t of datatypes['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
       <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:('DataType'|translate)"></mat-error>
     </mat-form-field>
@@ -2977,7 +3088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
       <mat-checkbox formControlName="multiple">{{'Multiple'|translate}}</mat-checkbox>
 </form>`
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: i1$3.FormBuilder }]; } });
+        }], ctorParameters: function () { return [{ type: SystemService }, { type: i1$3.FormBuilder }]; } });
 
 let NumberControlDesigner = class NumberControlDesigner {
     constructor(_fb) {
@@ -3012,7 +3123,7 @@ NumberControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
           <input matInput formControlName="max" type="number" />
         </mat-form-field>
       </div>
-</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 NumberControlDesigner = __decorate([
     BizDoc({ selector: 'number-control-designer' })
 ], NumberControlDesigner);
@@ -3072,7 +3183,7 @@ let InputFieldDesigner = class InputFieldDesigner {
     }
 };
 InputFieldDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: InputFieldDesigner, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-InputFieldDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: InputFieldDesigner, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <bizdoc-localized-string [placeholder]=\"'Placeholder'|translate\" formControlName=\"placeholder\"></bizdoc-localized-string>\r\n  <mat-form-field>\r\n    <mat-label>{{'Type'|translate}}</mat-label>\r\n    <mat-select formControlName=\"kind\">\r\n      <mat-option>{{'Text'|translate}}</mat-option>\r\n      <mat-option value=\"PhoneNumber\">{{'Tel'|translate}}</mat-option>\r\n      <mat-option value=\"EmailAddress\">{{'Email'|translate}}</mat-option>\r\n      <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Pattern'|translate}}</mat-label>\r\n    <input matInput formControlName=\"pattern\" />\r\n    <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n  </mat-form-field>\r\n  <div class=\"row\">\r\n    <!--<bizdoc-icon-picker formControlName=\"prefixIcon\"></bizdoc-icon-picker>\r\n    <bizdoc-icon-picker formControlName=\"suffixIcon\"></bizdoc-icon-picker>-->\r\n  </div>\r\n  <div class=\"row\">\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MinLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"minLength\" type=\"number\" />\r\n    </mat-form-field>&nbsp;\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MaxLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"maxLength\" type=\"number\" />\r\n    </mat-form-field>\r\n  </div>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+InputFieldDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: InputFieldDesigner, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <bizdoc-localized-string [placeholder]=\"'Placeholder'|translate\" formControlName=\"placeholder\"></bizdoc-localized-string>\r\n  <mat-form-field>\r\n    <mat-label>{{'Type'|translate}}</mat-label>\r\n    <mat-select formControlName=\"kind\">\r\n      <mat-option>{{'Text'|translate}}</mat-option>\r\n      <mat-option value=\"PhoneNumber\">{{'Tel'|translate}}</mat-option>\r\n      <mat-option value=\"EmailAddress\">{{'Email'|translate}}</mat-option>\r\n      <mat-option value=\"Url\">{{'Url'|translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Pattern'|translate}}</mat-label>\r\n    <input matInput formControlName=\"pattern\" />\r\n    <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n  </mat-form-field>\r\n  <div class=\"row\">\r\n    <!--<bizdoc-icon-picker formControlName=\"prefixIcon\"></bizdoc-icon-picker>\r\n    <bizdoc-icon-picker formControlName=\"suffixIcon\"></bizdoc-icon-picker>-->\r\n  </div>\r\n  <div class=\"row\">\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MinLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"minLength\" type=\"number\" />\r\n    </mat-form-field>&nbsp;\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MaxLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"maxLength\" type=\"number\" />\r\n    </mat-form-field>\r\n  </div>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 InputFieldDesigner = __decorate([
     BizDoc({ selector: 'text-control-designer' })
 ], InputFieldDesigner);
@@ -3096,7 +3207,7 @@ FileControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
  <form autocomplete="off" [formGroup]="form" class="column">
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
       <mat-checkbox formControlName="multiple">{{'Multiple'|translate}}</mat-checkbox>
-`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FileControlDesigner = __decorate([
     BizDoc({ selector: 'file-control-designer' })
 ], FileControlDesigner);
@@ -3137,7 +3248,7 @@ HtmlFieldDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
               <input matInput formControlName="maxLength" type="number" />
             </mat-form-field>
           </div>
-</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 HtmlFieldDesigner = __decorate([
     BizDoc({ selector: 'html-control-designer' })
 ], HtmlFieldDesigner);
@@ -3176,7 +3287,7 @@ let TextAreaFieldDesigner = class TextAreaFieldDesigner {
     }
 };
 TextAreaFieldDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TextAreaFieldDesigner, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-TextAreaFieldDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TextAreaFieldDesigner, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <bizdoc-localized-string [placeholder]=\"'Placeholder'|translate\" formControlName=\"placeholder\"></bizdoc-localized-string>\r\n  <div class=\"row\">\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MinLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"minLength\" type=\"number\" />\r\n    </mat-form-field>&nbsp;\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MaxLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"maxLength\" type=\"number\" />\r\n    </mat-form-field>\r\n  </div>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+TextAreaFieldDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TextAreaFieldDesigner, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <bizdoc-localized-string [placeholder]=\"'Placeholder'|translate\" formControlName=\"placeholder\"></bizdoc-localized-string>\r\n  <div class=\"row\">\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MinLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"minLength\" type=\"number\" />\r\n    </mat-form-field>&nbsp;\r\n    <mat-form-field flex>\r\n      <mat-label>{{'MaxLength'|translate}}</mat-label>\r\n      <input matInput formControlName=\"maxLength\" type=\"number\" />\r\n    </mat-form-field>\r\n  </div>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 TextAreaFieldDesigner = __decorate([
     BizDoc({ selector: 'textarea-control-designer' })
 ], TextAreaFieldDesigner);
@@ -3202,7 +3313,7 @@ DateControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 <form autocomplete="off" [formGroup]="form" class="column">
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
       <bizdoc-localized-string [placeholder]="'Placeholder'|translate" formControlName="placeholder"></bizdoc-localized-string>
-</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 DateControlDesigner = __decorate([
     BizDoc({ selector: 'date-control-designer' })
 ], DateControlDesigner);
@@ -3236,7 +3347,7 @@ DateRangeControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
       <bizdoc-localized-string [placeholder]="'Placeholder'|translate" formControlName="startPlaceholder"></bizdoc-localized-string>
       <bizdoc-localized-string [placeholder]="'Placeholder'|translate" formControlName="endPlaceholder"></bizdoc-localized-string>
-</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 DateRangeControlDesigner = __decorate([
     BizDoc({ selector: 'date-range-control-designer' })
 ], DateRangeControlDesigner);
@@ -3266,7 +3377,7 @@ CheckboxControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
    <form autocomplete="off" [formGroup]="form" class="column">
       <bizdoc-localized-string [placeholder]="'Label'|translate" required formControlName="label"></bizdoc-localized-string>
 </form>
-`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 CheckboxControlDesigner = __decorate([
     BizDoc({ selector: 'checkbox-control-designer' })
 ], CheckboxControlDesigner);
@@ -3281,25 +3392,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; } });
 
-let YesNoControlDesigner = class YesNoControlDesigner {
-    constructor(_session, _fb) {
-        this._session = _session;
+let YesNoControlDesigner = class YesNoControlDesigner extends OptionsControlDesigner {
+    constructor(service, _fb) {
+        super(service);
         this._fb = _fb;
         this.form = this._fb.group({
             dataType: null,
             hint: null,
             defaultValue: null,
         });
-        this.datatypes = this._session.profile.types;
     }
 };
-YesNoControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: YesNoControlDesigner, deps: [{ token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-YesNoControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: YesNoControlDesigner, selector: "ng-component", ngImport: i0, template: `
+YesNoControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: YesNoControlDesigner, deps: [{ token: SystemService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+YesNoControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: YesNoControlDesigner, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
   <form autocomplete="off" [formGroup]="form" class="column">
-    <mat-form-field>
+    <mat-form-field *ngIf="datatypes">
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType">
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title|localizedString}}</mat-option>
+        <mat-option *ngFor="let t of datatypes['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
     </mat-form-field>
       <mat-form-field>
@@ -3310,7 +3427,7 @@ YesNoControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
           <mat-option [value]="false">{{'No'|translate}}</mat-option>
         </mat-select>
       </mat-form-field>
-</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 YesNoControlDesigner = __decorate([
     BizDoc({ selector: 'yesno-control-designer' })
 ], YesNoControlDesigner);
@@ -3319,10 +3436,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             args: [{
                     template: `
   <form autocomplete="off" [formGroup]="form" class="column">
-    <mat-form-field>
+    <mat-form-field *ngIf="datatypes">
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType">
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title|localizedString}}</mat-option>
+        <mat-option *ngFor="let t of datatypes['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
     </mat-form-field>
       <mat-form-field>
@@ -3335,11 +3459,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
       </mat-form-field>
 </form>`
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: i1$3.FormBuilder }]; } });
+        }], ctorParameters: function () { return [{ type: SystemService }, { type: i1$3.FormBuilder }]; } });
 
 let ChecklistControlDesigner = class ChecklistControlDesigner extends OptionsControlDesigner {
-    constructor(session, _fb) {
-        super(session);
+    constructor(service, _fb) {
+        super(service);
         this._fb = _fb;
         this.form = this._fb.group({
             label: null,
@@ -3352,19 +3476,26 @@ let ChecklistControlDesigner = class ChecklistControlDesigner extends OptionsCon
         this.model = model;
     }
 };
-ChecklistControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChecklistControlDesigner, deps: [{ token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ChecklistControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChecklistControlDesigner, deps: [{ token: SystemService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
 ChecklistControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ChecklistControlDesigner, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
    <form autocomplete="off" [formGroup]="form" class="column">
       <mat-checkbox formControlName="multiple">{{'Multiple'|translate}}</mat-checkbox>
-    <mat-form-field>
+    <mat-form-field *ngIf="datatypes">
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType">
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title}}</mat-option>
+        <mat-option *ngFor="let t of datatypes['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
     <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:('DataType'|translate)"></mat-error>
     </mat-form-field>
   <bizdoc-design-options [form]="form" [model]="model"></bizdoc-design-options>
-</form>`, isInline: true, 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ChecklistControlDesigner = __decorate([
     BizDoc({ selector: 'checklist-control-designer' })
 ], ChecklistControlDesigner);
@@ -3374,21 +3505,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     template: `
    <form autocomplete="off" [formGroup]="form" class="column">
       <mat-checkbox formControlName="multiple">{{'Multiple'|translate}}</mat-checkbox>
-    <mat-form-field>
+    <mat-form-field *ngIf="datatypes">
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType">
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title}}</mat-option>
+        <mat-option *ngFor="let t of datatypes['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
     <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:('DataType'|translate)"></mat-error>
     </mat-form-field>
   <bizdoc-design-options [form]="form" [model]="model"></bizdoc-design-options>
 </form>`
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: i1$3.FormBuilder }]; } });
+        }], ctorParameters: function () { return [{ type: SystemService }, { type: i1$3.FormBuilder }]; } });
 
 let RadioButtonControlDesigner = class RadioButtonControlDesigner extends OptionsControlDesigner {
-    constructor(session, _fb) {
-        super(session);
+    constructor(service, _fb) {
+        super(service);
         this._fb = _fb;
         this.form = this._fb.group({
             label: null,
@@ -3400,15 +3538,15 @@ let RadioButtonControlDesigner = class RadioButtonControlDesigner extends Option
         this.model = model;
     }
 };
-RadioButtonControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: RadioButtonControlDesigner, deps: [{ token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: RadioButtonControlDesigner, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <mat-form-field>\r\n    <mat-label>{{'DataType'|translate}}</mat-label>\r\n    <mat-select formControlName=\"dataType\">\r\n      <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title|localizedString}}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get('dataType').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-design-options [form]=\"form\" [model]=\"model\"></bizdoc-design-options>\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: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "component", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+RadioButtonControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: RadioButtonControlDesigner, deps: [{ token: SystemService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: RadioButtonControlDesigner, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <mat-form-field *ngIf=\"datatypes\">\r\n    <mat-label>{{'DataType'|translate}}</mat-label>\r\n    <mat-select formControlName=\"dataType\">\r\n      <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n        {{t.title}}\r\n      </mat-option>\r\n      <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n        <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n      </mat-optgroup>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get('dataType').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-design-options [form]=\"form\" [model]=\"model\"></bizdoc-design-options>\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: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 RadioButtonControlDesigner = __decorate([
     BizDoc({ selector: 'radio-button-control-designer' })
 ], RadioButtonControlDesigner);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: RadioButtonControlDesigner, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <mat-form-field>\r\n    <mat-label>{{'DataType'|translate}}</mat-label>\r\n    <mat-select formControlName=\"dataType\">\r\n      <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title|localizedString}}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get('dataType').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-design-options [form]=\"form\" [model]=\"model\"></bizdoc-design-options>\r\n</form>\r\n" }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: i1$3.FormBuilder }]; } });
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Label'|translate\" formControlName=\"label\"></bizdoc-localized-string>\r\n  <mat-form-field *ngIf=\"datatypes\">\r\n    <mat-label>{{'DataType'|translate}}</mat-label>\r\n    <mat-select formControlName=\"dataType\">\r\n      <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n        {{t.title}}\r\n      </mat-option>\r\n      <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n        <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n      </mat-optgroup>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get('dataType').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-design-options [form]=\"form\" [model]=\"model\"></bizdoc-design-options>\r\n</form>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SystemService }, { type: i1$3.FormBuilder }]; } });
 
 let AddressControlDesigner = class AddressControlDesigner {
     constructor(_fb) {
@@ -3425,7 +3563,7 @@ AddressControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
     <form autocomplete="off" [formGroup]="form" class="column">
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
       <bizdoc-localized-string [placeholder]="'Placeholder'|translate" formControlName="placeholder"></bizdoc-localized-string>
-</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 AddressControlDesigner = __decorate([
     BizDoc({ selector: 'address-control-designer' })
 ], AddressControlDesigner);
@@ -3454,7 +3592,7 @@ SignatureControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
 <form autocomplete="off" [formGroup]="form" class="column">
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
     <bizdoc-localized-string [placeholder]="'Hint'|translate" formControlName="hint"></bizdoc-localized-string>
-</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 SignatureControlDesigner = __decorate([
     BizDoc({ selector: 'signature-control-designer' })
 ], SignatureControlDesigner);
@@ -3707,6 +3845,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }] } });
 
+class LocalizedStringPipe {
+    constructor(_session) {
+        this._session = _session;
+    }
+    transform(value, ...args) {
+        if (!value)
+            return null;
+        if (isString(value))
+            return value;
+        let val = value[this._session.language];
+        if (val)
+            return val;
+        return Object.values(value)[0];
+    }
+}
+LocalizedStringPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringPipe, deps: [{ token: SessionService }], target: i0.ɵɵFactoryTarget.Pipe });
+LocalizedStringPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringPipe, name: "localizedString" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'localizedString' }]
+        }], ctorParameters: function () { return [{ type: SessionService }]; } });
+
 class TypeValuePipe {
     /** type-value ctor */
     constructor(_translate, _ds) {
@@ -3772,9 +3932,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: ViewChild,
                 args: [TypeAutocomplete]
             }] } });
-let AutocompleteControlDesigner = class AutocompleteControlDesigner {
-    constructor(_session, _fb) {
-        this._session = _session;
+let AutocompleteControlDesigner = class AutocompleteControlDesigner extends OptionsControlDesigner {
+    constructor(service, _fb) {
+        super(service);
         this._fb = _fb;
         this.form = this._fb.group({
             label: null,
@@ -3783,11 +3943,10 @@ let AutocompleteControlDesigner = class AutocompleteControlDesigner {
             dataType: this._fb.control(null, Validators.required),
             hint: null,
         });
-        this.datatypes = this._session.profile.types;
     }
 };
-AutocompleteControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AutocompleteControlDesigner, deps: [{ token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AutocompleteControlDesigner, selector: "ng-component", ngImport: i0, template: `
+AutocompleteControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AutocompleteControlDesigner, deps: [{ token: SystemService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AutocompleteControlDesigner, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
 <form autocomplete="off" [formGroup]="form" class="column">
       <mat-checkbox formControlName="multiple">{{'Multiple'|translate}}</mat-checkbox>
           <mat-form-field>
@@ -3797,11 +3956,18 @@ AutocompleteControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
   <mat-form-field>
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType" required>
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title|localizedString}}</mat-option>
+        <mat-option *ngFor="let t of (datatypes|async)['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|async|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
       <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:'DataType'"></mat-error>
     </mat-form-field>
-</form>`, isInline: true, 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+</form>`, isInline: true, 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 AutocompleteControlDesigner = __decorate([
     BizDoc({ selector: 'autocomplete-control-designer' })
 ], AutocompleteControlDesigner);
@@ -3818,13 +3984,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
   <mat-form-field>
       <mat-label>{{'DataType'|translate}}</mat-label>
       <mat-select formControlName="dataType" required>
-        <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title|localizedString}}</mat-option>
+        <mat-option *ngFor="let t of (datatypes|async)['_'].elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      <mat-optgroup *ngFor="let g of datatypes|async|sort: 'title'" [label]="g.title">
+        <mat-option *ngFor="let t of g.elements|sort: 'title'" [value]="t.name">
+          {{t.title}}
+        </mat-option>
+      </mat-optgroup>
       </mat-select>
       <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:'DataType'"></mat-error>
     </mat-form-field>
 </form>`
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: i1$3.FormBuilder }]; } });
+        }], ctorParameters: function () { return [{ type: SystemService }, { type: i1$3.FormBuilder }]; } });
 
 const INBOX = 'ib', DRAFT = 'df';
 var ValidationType;
@@ -4170,84 +4343,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 args: [TimespanInput]
             }] } });
 
-class SystemService {
-    constructor(_http) {
-        this._http = _http;
-    }
-    rules(args) {
-        return this._http.get('/api/system/form/rules', { params: args });
-    }
-    synchrinize(name) {
-        return this._http.post(`/api/system/cube/${encodeURIComponent(name)}/synchronize`, {});
-    }
-    findAll(options) {
-        const params = {};
-        if (isString(options))
-            params['search'] = options;
-        else {
-            if (options.search)
-                params['search'] = options.search;
-            if (options.formId)
-                params['formId'] = options.formId;
-            if (options.start)
-                params['start'] = new Date(options.start).toISOString();
-            if (options.end)
-                params['end'] = new Date(options.end).toISOString();
-        }
-        return this._http.get('/api/system/form/findAll', {
-            params
-        });
-    }
-    roles() {
-        return SystemService._cache['roles'] || (SystemService._cache['roles'] =
-            this._http.get('/api/system/positions/roles').pipe(shareReplay$1()));
-    }
-    /**
-     *
-     * @param formId
-     */
-    range(formId) {
-        return this._http.get('/api/system/form/range', {
-            params: { formId: formId || null }
-        }).pipe(tap$1((r) => r.forEach(p => p.date = new Date(p.date))));
-    }
-    /**
-     *
-     * @param formId
-     * @param options
-     */
-    invite(formId, options) {
-        return this._http.put(`/api/system/form/invite/${formId}`, options);
-    }
-    projection(options) {
-        return this._http.put('/api/system/form/projection/', options);
-    }
-    cube(name) {
-        return this._http.get(`/api/system/cube/${encodeURIComponent(name)}`);
-    }
-    /**
-     *
-     * @param name
-     */
-    form(name) {
-        return this._http.get(`/api/system/form/${encodeURIComponent(name)}`);
-    }
-    controls() {
-        return this._controls || (this._controls = this._http.get(`/api/system/form/controls`).
-            pipe(tap$1(c => c.forEach(i => c[i.name] = i)), shareReplay$1()));
-    }
-    save(form) {
-        const { workflow } = form;
-        return this._http.put(`/api/system/form/${encodeURIComponent(form.name)}`, { workflow });
-    }
-}
-SystemService._cache = {};
-SystemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SystemService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-SystemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SystemService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SystemService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-
 class AceInput {
     constructor(ngControl, _el, _service) {
         this.ngControl = ngControl;
@@ -4706,7 +4801,7 @@ class MailboxService {
         /**
          */
         this._notify = () => (observe) => {
-            return observe.pipe(tap(m => {
+            return observe.pipe(tap$1(m => {
                 m.loaded = true;
                 this._change$.next(m);
             }));
@@ -4744,13 +4839,13 @@ class MailboxService {
         return this._http.delete(`/api/attachments/${recipientId}/${fileId}`);
     }
     read(id, read, folderId, received) {
-        return this._http.put(`/api/mailbox/read/${id}`, undefined, { params: { read } }).pipe(tap(() => folderId && this._updateunreadcounter(received, folderId, read ? 1 : -1)));
+        return this._http.put(`/api/mailbox/read/${id}`, undefined, { params: { read } }).pipe(tap$1(() => folderId && this._updateunreadcounter(received, folderId, read ? 1 : -1)));
     }
     comments(id, before) {
         return this._http.get(`/api/comments/${id}`, { params: { before: new Date(before).toJSON() } });
     }
     tags(id, tags) {
-        return this._http.put(`/api/mailbox/tag/${id}`, { tags }).pipe(tap(() => {
+        return this._http.put(`/api/mailbox/tag/${id}`, { tags }).pipe(tap$1(() => {
             this._change$.next({ id, tags });
         }));
     }
@@ -4764,7 +4859,7 @@ class MailboxService {
         return this._http.put(`/api/mailbox/changestate/${documentId}`, { stateId, userId });
     }
     move(id, folderId) {
-        return this._http.put(`/api/mailbox/move/${id}?folderId=${folderId}`, {}).pipe(tap(() => {
+        return this._http.put(`/api/mailbox/move/${id}?folderId=${folderId}`, {}).pipe(tap$1(() => {
             this._change$.next({
                 id,
                 folderId
@@ -4873,10 +4968,10 @@ class MailboxService {
         });
     }
     flag(id, flag) {
-        return this._http.put(`/api/mailbox/flag/${id}?flag=${flag}`, null).pipe(tap(() => this._change$.next({ id, flag })));
+        return this._http.put(`/api/mailbox/flag/${id}?flag=${flag}`, null).pipe(tap$1(() => this._change$.next({ id, flag })));
     }
     viewedcomments(id) {
-        return this._http.put(`/api/comments/viewed/${id}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap((e) => this._change$.next({ id, viewed: e.time })));
+        return this._http.put(`/api/comments/viewed/${id}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap$1((e) => this._change$.next({ id, viewed: e.time })));
     }
     typing(id) {
         return this._http.put(`/api/comments/typing/${id}`, {}, { headers: { 'no-progress': 'true' } }).toPromise();
@@ -4924,7 +5019,7 @@ class MailboxService {
         })), this._notify());
     }
     get(id, read) {
-        return this._http.get(`/api/mail/${id}`).pipe(tap((m) => read === false && m.read === true &&
+        return this._http.get(`/api/mail/${id}`).pipe(tap$1((m) => read === false && m.read === true &&
             this._updateunreadcounter(m.received, m.folderId, -1)));
     }
     _updateunreadcounter(date, folderId, val) {
@@ -4970,7 +5065,7 @@ class MailboxService {
         return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}`, model, { params })), this._notify());
     }
     delete(id) {
-        return this._http.delete(`/api/mail/${id}`).pipe(tap(() => this._delete$.next(id)));
+        return this._http.delete(`/api/mail/${id}`).pipe(tap$1(() => this._delete$.next(id)));
     }
     removecomment(id) {
         return this._http.delete(`/api/comments/${id}`);
@@ -4984,7 +5079,7 @@ class MailboxService {
         return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&go=true`, model, { params }))).pipe(this._notify());
     }
     send(id, version, form, model, action, actionArgs, read, folderId, received) {
-        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&action=${action}`, model, { params: Object.assign(Object.assign({}, params), actionArgs) }))).pipe(tap(() => read === false && this._updateunreadcounter(received, folderId, -1)), this._notify());
+        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&action=${action}`, model, { params: Object.assign(Object.assign({}, params), actionArgs) }))).pipe(tap$1(() => read === false && this._updateunreadcounter(received, folderId, -1)), this._notify());
     }
     events(starting, ending, contains) {
         return this._http.get(`/api/events`, {
@@ -5760,7 +5855,7 @@ class FileInput {
                         pipe(reportProgress(item), catchError(e => {
                         this._handleError(e);
                         return of(false);
-                    }), tap((a) => {
+                    }), tap$1((a) => {
                         if (a) {
                             delete item.checkedOut;
                             // replace id
@@ -5777,7 +5872,7 @@ class FileInput {
                         pipe(reportProgress(item), catchError(e => {
                         this._handleError(e);
                         return of(false);
-                    }), tap((a) => {
+                    }), tap$1((a) => {
                         if (a) {
                             this._value = this.multiple ? this.items.map(i => i.id) : a.id;
                             Object.assign(item, a);
@@ -5797,7 +5892,7 @@ class FileInput {
                     pipe(/*TODO reportProgress(item), */ catchError(e => {
                     this._handleError(e);
                     return of(false);
-                }), tap((a) => {
+                }), tap$1((a) => {
                     if (a) {
                         this._model.attachments.push(a);
                         this.items.push(this._createItem(a));
@@ -6144,7 +6239,7 @@ class LocalizedStringField {
     }
 }
 LocalizedStringField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LocalizedStringField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LocalizedStringField, selector: "ng-component", host: { classAttribute: "field" }, ngImport: i0, template: "<bizdoc-localized-string [formControl]=\"control\" [placeholder]=\"placeholder\" [required]=\"required\" class=\"column\"></bizdoc-localized-string>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }] });
+LocalizedStringField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LocalizedStringField, selector: "ng-component", host: { classAttribute: "field" }, ngImport: i0, template: "<bizdoc-localized-string [formControl]=\"control\" [placeholder]=\"placeholder\" [required]=\"required\" class=\"column\"></bizdoc-localized-string>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalizedStringField, decorators: [{
             type: Component,
             args: [{ host: { class: 'field' }, template: "<bizdoc-localized-string [formControl]=\"control\" [placeholder]=\"placeholder\" [required]=\"required\" class=\"column\"></bizdoc-localized-string>\r\n" }]
@@ -6974,7 +7069,7 @@ class ActionBase {
     _ok(action, args) {
         const { id, version, number, model, formId } = this.model;
         return this._mailbox.send(id, version, formId, model, action.name, args).
-            pipe(tap$1(r => {
+            pipe(tap(r => {
             const origin = r.recipients.filter(r => r.originId === id);
             if (origin.length)
                 this._accounts.getAll(origin.map(r => r.userId)).subscribe(u => this._sb.toast('SentTo', number, (action.adjective || action.past || action.title).toLowerCase(), this._translate.join(u.map(u => u.name))));
@@ -7772,7 +7867,7 @@ class CubeService {
                         if (!p.x)
                             return;
                         const pobservable = forkJoin(p.x.split(AXES_CODE_DIVIDER).map((k, j) => this._type.get(axisTypeMap[xAxis[j]], k))).
-                            pipe(tap(o => p.name = o.join(AXES_LABEL_DIVIDER)));
+                            pipe(tap$1(o => p.name = o.join(AXES_LABEL_DIVIDER)));
                         observables.push(pobservable);
                         if (i > 0) {
                             let j = 0, missing = true;
@@ -7790,7 +7885,7 @@ class CubeService {
                                 const clone = { x: p.x, y: 0 };
                                 base.splice(j, 0, clone);
                                 const cobservable = forkJoin(p.x.split(AXES_CODE_DIVIDER).map((k, j) => this._type.get(axisTypeMap[xAxis[j]], k))).
-                                    pipe(tap(o => clone.name = o.join(AXES_LABEL_DIVIDER)));
+                                    pipe(tap$1(o => clone.name = o.join(AXES_LABEL_DIVIDER)));
                                 observables.push(cobservable);
                             }
                         }
@@ -7800,7 +7895,7 @@ class CubeService {
                         s.title = index.title;
                     }
                     else if (s.name) {
-                        const sobservable = forkJoin(s.name.split(AXES_CODE_DIVIDER).map((k, i) => this._type.get(axisTypeMap[series[i]], k))).pipe(tap(v => s.title = v.join(AXES_LABEL_DIVIDER)));
+                        const sobservable = forkJoin(s.name.split(AXES_CODE_DIVIDER).map((k, i) => this._type.get(axisTypeMap[series[i]], k))).pipe(tap$1(v => s.title = v.join(AXES_LABEL_DIVIDER)));
                         observables.push(sobservable);
                     }
                 });
@@ -7830,7 +7925,7 @@ class CubeService {
                     if (value !== undefined) {
                         // keep key
                         row['_' + name] = value;
-                        const observable = this._type.get(dataType, value).pipe(tap(v => row[name] = v || value));
+                        const observable = this._type.get(dataType, value).pipe(tap$1(v => row[name] = v || value));
                         observables.push(observable);
                     }
                 }));
@@ -7859,7 +7954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                     }] }, { type: i1.HttpClient }, { type: DatasourceService }, { type: SessionService }];
     } });
 function progress(time = 200) {
-    return source => source.pipe(tap(), map(() => false));
+    return source => source.pipe(tap$1(), map(() => false));
 }
 /** modelize cube results as nested maps */
 function modelize() {
@@ -7884,52 +7979,6 @@ function errResource(error) {
     return null;
 }
 
-class ArraySortPipe {
-    transform(array, field, order = 'asc') {
-        if (!Array.isArray(array)) {
-            return;
-        }
-        array.sort((a, b) => {
-            if (a[field] < b[field]) {
-                return order === 'asc' ? -1 : 1;
-            }
-            else if (a[field] > b[field]) {
-                return order === 'asc' ? 1 : -1;
-            }
-            else {
-                return 0;
-            }
-        });
-        return array;
-    }
-}
-ArraySortPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ArraySortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ArraySortPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: ArraySortPipe, name: "sort" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ArraySortPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "sort"
-                }]
-        }] });
-class FilterPipe {
-    transform(array, field, value) {
-        if (!Array.isArray(array))
-            return;
-        if (!value)
-            return array;
-        value = value.trim().toLowerCase();
-        return array.filter(i => i[field].toLowerCase().indexOf(value) > -1);
-    }
-}
-FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: FilterPipe, name: "filter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FilterPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "filter"
-                }]
-        }] });
-
 /** filter component*/
 class CubeFilterComponent {
     /** filter ctor */
@@ -8198,7 +8247,7 @@ class PanesRouter {
     navigate(commands, options) {
         return new Promise((resolve, reject) => {
             this._events$.pipe(filter(e => e instanceof NavigationStart), first()).subscribe((e) => resolve(e.pane), reject);
-            this._navigate$.next(isArray(commands) ? Object.assign({ commands }, options) : Object.assign({ component: commands }, options));
+            this._navigate$.next(isArray(commands) ? Object.assign({ commands: commands }, options) : Object.assign({ component: commands }, options));
         });
     }
     get events() { return this._events$.asObservable(); }
@@ -9204,7 +9253,7 @@ class BrowseItemsComponent {
         localStorage.setItem('direction', value);
     }
     submitAll() {
-        this._forEach(i => this._mailbox.submit(i.id, i.version, i.formId).pipe(tap(() => this.dataSource.data.remove(i))), 'SubmitErr').
+        this._forEach(i => this._mailbox.submit(i.id, i.version, i.formId).pipe(tap$1(() => this.dataSource.data.remove(i))), 'SubmitErr').
             subscribe(is => is.length > 1 ? this._sb.toast('SubmittedMany', is.length) :
             this._sb.toast('Submitted', is[0].number));
     }
@@ -9213,7 +9262,7 @@ class BrowseItemsComponent {
             color: 'warn',
             ok: 'Discard'
         }).subscribe(ok => ok &&
-            this._forEach(i => this._mailbox.delete(i.id).pipe(tap(() => this.dataSource.data.remove(i))), 'Err').subscribe());
+            this._forEach(i => this._mailbox.delete(i.id).pipe(tap$1(() => this.dataSource.data.remove(i))), 'Err').subscribe());
     }
     toggleExpanded(item, event) {
         if (this.expandedElement != item) {
@@ -9287,7 +9336,7 @@ class BrowseItemsComponent {
         const items = this.selection.selected.slice();
         const errors = new Subject();
         errors.pipe().subscribe(m => this._sb.errorString(m));
-        const promises = items.map(m => fn(m).pipe(tap(() => {
+        const promises = items.map(m => fn(m).pipe(tap$1(() => {
         }, (e) => {
             let message;
             switch (e.status) {
@@ -9306,7 +9355,7 @@ class BrowseItemsComponent {
             }
             errors.next(message);
         }), finalize(() => m.working = false)));
-        return forkJoin(promises).pipe(tap(() => {
+        return forkJoin(promises).pipe(tap$1(() => {
             errors.unsubscribe();
             this.selection.clear();
             this.dataSource.filter = '';
@@ -9362,7 +9411,7 @@ class BrowseItemsComponent {
     sendAll(action, args) {
         const params = queryParams(args);
         this._forEach(i => this._mailbox.send(i.id, i.version, i.formId, null, action, params, i.read, i.folderId, i.received).
-            pipe(tap(() => {
+            pipe(tap$1(() => {
             if (i.folderId !== this.folderId)
                 this.dataSource.data.remove(i);
         })), 'SendErr').
@@ -9807,7 +9856,7 @@ class ComposeFormComponent {
         this.working = true;
         this.workingChange.emit(true);
         const { id, version, formId, model, draft } = this.model;
-        return this._mailbox.save(id, formId, version, model).pipe(tap(m => {
+        return this._mailbox.save(id, formId, version, model).pipe(tap$1(m => {
             this._assign(m, false);
             this._reset();
             feedback &&
@@ -9835,7 +9884,7 @@ class ComposeFormComponent {
                 this.model.attachments.splice(retry, 1);
             const model = this._constructAttachment(f);
             const observable = this._mailbox.upload(this.model.id, this.model.formId, this.model.version, f).
-                pipe(tap((r) => {
+                pipe(tap$1((r) => {
                 this._sb.toast(!exists ? 'UploadOk' : 'UploadVersionOk', f.name);
                 Object.assign(model, r, { progress: null, });
                 this.model.attachments.push(model);
@@ -9932,7 +9981,7 @@ class ComposeFormComponent {
         this.working = true;
         this.workingChange.emit(true);
         return this._mailbox.submit(id, version, formId, model).
-            pipe(tap(() => {
+            pipe(tap$1(() => {
             this._sb.toast('Submitted', number);
             this.working = false;
             this.workingChange.emit(false);
@@ -11025,7 +11074,7 @@ class CubeGridComponent {
         const promises = [];
         // aquire columns source
         let observe = this._ds.all(x.dataType).
-            pipe(tap(c => {
+            pipe(tap$1(c => {
             this._columns = c;
             const format = `${this.currencyCode ? 'c' : 'n'}${this._service.fractionDigits}`;
             this.columns = [{
@@ -11056,7 +11105,7 @@ class CubeGridComponent {
         promises.push(observe);
         // aquire rows source
         observe = this._ds.all(y.dataType).
-            pipe(tap(r => this._rows = r));
+            pipe(tap$1(r => this._rows = r));
         promises.push(observe);
         // prepare
         this._prepare =
@@ -13836,7 +13885,7 @@ class ReportViewerComponent {
     execute() {
         this.progress = 0;
         return this._http.post(`/api/report/${encodeURIComponent(this.report.name)}`, this.args).
-            pipe(tap(r => {
+            pipe(tap$1(r => {
             this._instance.onBind(r, this.args);
             this._data = r;
             this.progress = -1;
@@ -14843,7 +14892,7 @@ class UtilityRef {
         return this._hub.jobProgress$.pipe(filter(e => e.jobId === this.jobId), map(e => e.event));
     }
     execute(args) {
-        return this._http.post(`/api/utility/${encodeURIComponent(this._utility.name)}`, args, { observe: 'response' }).pipe(tap((r) => {
+        return this._http.post(`/api/utility/${encodeURIComponent(this._utility.name)}`, args, { observe: 'response' }).pipe(tap$1((r) => {
             this._jobId = r.headers.get('job-id');
         }), map((r) => r.body), catchError((e) => {
             if (e.status === 406) // validation exception
@@ -16453,7 +16502,7 @@ class ComposeDismiss {
     onDismiss(component) {
         if (component.form.dirty) {
             component.form.working = true;
-            return this._dialog.open(SaveChangesDialog).afterClosed().pipe(tap(() => component.form.working = false), switchMap(ok => ok ? component.form.save() : of(ok !== false)));
+            return this._dialog.open(SaveChangesDialog).afterClosed().pipe(tap$1(() => component.form.working = false), switchMap(ok => ok ? component.form.save() : of(ok !== false)));
         }
         else
             return true;
@@ -16660,7 +16709,7 @@ class CubeMatrixComponent {
             this.xAxis = this.cube.axes.find(a => a.name === this._xAxis);
             this.series = this.cube.axes.find(a => a.name === this._series);
             this.data = null;
-            this._prepare = forkJoin(this._ds.all(this.series.dataType).pipe(tap(r => this.rows = r)), this._ds.all(this.xAxis.dataType).pipe(tap(c => this.columns = c))).toPromise().then(() => {
+            this._prepare = forkJoin(this._ds.all(this.series.dataType).pipe(tap$1(r => this.rows = r)), this._ds.all(this.xAxis.dataType).pipe(tap$1(c => this.columns = c))).toPromise().then(() => {
                 this._indices && this._addindices();
                 this._sum && this._addsumheaders();
             });
@@ -17610,7 +17659,7 @@ class NotificationsService {
             this._session.profile.options.notificationsView < date;
     }
     read(id, date, read) {
-        return this._http.put(`/api/notifications/${id}?read=${read}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap(() => {
+        return this._http.put(`/api/notifications/${id}?read=${read}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap$1(() => {
             if (this._isAboveWatermark(date))
                 this._session.profile.notificationsCount--;
         }));
@@ -17807,7 +17856,7 @@ class ChatService {
         });
     }
     seen(contactId) {
-        return this._http.put(`/api/chat/seen/${encodeURIComponent(contactId)}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap((e) => {
+        return this._http.put(`/api/chat/seen/${encodeURIComponent(contactId)}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap$1((e) => {
             const contact = this._map[contactId];
             contact.visited = e.time;
             contact.count = 0;
@@ -17827,7 +17876,7 @@ class ChatService {
         });
     }
     send(contactId, options) {
-        return this._http.post(`/api/chat/${encodeURIComponent(contactId)}`, options).pipe(tap((c) => {
+        return this._http.post(`/api/chat/${encodeURIComponent(contactId)}`, options).pipe(tap$1((c) => {
             const contact = this.find(contactId);
             Object.assign(contact, {
                 text: c.text,
@@ -17881,7 +17930,7 @@ class ContactsComponent {
         this.contacts = this._session.profile.contacts;
     }
     _prepare() {
-        forkJoin(this.contacts.map(c => this._accounts.get(c.id).pipe(tap(u => Object.assign(c, u))))).
+        forkJoin(this.contacts.map(c => this._accounts.get(c.id).pipe(tap$1(u => Object.assign(c, u))))).
             subscribe();
     }
     ngOnInit() {
@@ -18803,7 +18852,7 @@ class OptionsComponent {
             exclude.push(this._session.profile.userId);
             return r.filter(u => exclude.indexOf(u.id) < 0);
         }));
-        this.susers$ = this.substitueId.valueChanges.pipe(takeUntil$1(this._destroy), tap(v => !v && outOfOffice.controls['substitueId'].setValue(null)), filter(v => isString(v)), switchMap(v => this._accounts.findAll(v)), map(r => r.filter(u => u.id !== this._session.profile.userId)));
+        this.susers$ = this.substitueId.valueChanges.pipe(takeUntil$1(this._destroy), tap$1(v => !v && outOfOffice.controls['substitueId'].setValue(null)), filter(v => isString(v)), switchMap(v => this._accounts.findAll(v)), map(r => r.filter(u => u.id !== this._session.profile.userId)));
         if (options.outOfOffice.substitueId)
             this._accounts.get(options.outOfOffice.substitueId).subscribe(u => this.substitueId.setValue(u, { emitEvent: false }));
         if (this._option)
@@ -19078,7 +19127,7 @@ class AppHttpInterceptor {
         }));
         if (!req.headers.has('no-progress')) {
             this._ongoingCounter$.next(1);
-            return handle.pipe(tap(event => event instanceof HttpResponse
+            return handle.pipe(tap$1(event => event instanceof HttpResponse
                 && this._ongoingCounter$.next(0), () => this._ongoingCounter$.next(0)));
         }
         else
@@ -19763,7 +19812,7 @@ class SlotsComponent {
                         state = {};
                     yield this._state(route, path, params, state);
                     if ((policy & OpenPolicy.Tab) == OpenPolicy.Tab)
-                        this._insertTab(component || route.component, {
+                        this._insertTab(route.component, {
                             queryString,
                             path,
                             route,
@@ -19779,7 +19828,7 @@ class SlotsComponent {
                             injector
                         });
                     else
-                        this._insertPane(component || route.component, {
+                        this._insertPane(route.component, {
                             queryString,
                             path,
                             route,
@@ -19806,7 +19855,9 @@ class SlotsComponent {
                 }
             }
             else {
-                if ((policy & OpenPolicy.Tab) == OpenPolicy.Tab)
+                if ((policy & OpenPolicy.Tab) == OpenPolicy.Tab) {
+                    if ((policy & OpenPolicy.Defer) == OpenPolicy.Defer)
+                        yield this._clearTabs();
                     this._insertTab(component, {
                         data: state,
                         icon, title, help,
@@ -19820,6 +19871,7 @@ class SlotsComponent {
                         policy,
                         injector
                     });
+                }
                 else
                     this._insertPane(component, {
                         data: state,
@@ -20234,7 +20286,7 @@ class SlotsComponent {
                     if (isPromise(value))
                         yield value.then(r => data[key] = r);
                     else if (isObservable(value))
-                        yield value.pipe(tap(r => data[key] = r)).toPromise();
+                        yield value.pipe(tap$1(r => data[key] = r)).toPromise();
                     else
                         data[key] = value;
                 }
@@ -22002,7 +22054,7 @@ class RecipientResolveService {
                 return of(item);
         }
         const id = route.paramMap.get('id').decodeId();
-        return this._mailbox.get(id).pipe(tap(null, () => this._sb.error()));
+        return this._mailbox.get(id).pipe(tap$1(null, () => this._sb.error()));
     }
 }
 RecipientResolveService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: RecipientResolveService, deps: [{ token: MailboxService }, { token: PromptService }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -22025,7 +22077,7 @@ class DocumentResolveService {
                 return of(item);
         }
         const id = route.paramMap.get('id').decodeId();
-        return this._mailbox.info(id).pipe(tap(null, () => this._sb.error()));
+        return this._mailbox.info(id).pipe(tap$1(null, () => this._sb.error()));
     }
 }
 DocumentResolveService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DocumentResolveService, deps: [{ token: MailboxService }, { token: PromptService }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -23098,7 +23150,7 @@ class CubeAnalysisBase {
                     if (!p.x)
                         return;
                     const pobservable = forkJoin(p.x.split(AXES_CODE_DIVIDER).map((k, j) => this._ds.get(this._axisTypeMap[this._xAxis[j]], k))).
-                        pipe(tap(o => p.name = o.join(AXES_LABEL_DIVIDER)));
+                        pipe(tap$1(o => p.name = o.join(AXES_LABEL_DIVIDER)));
                     observables.push(pobservable);
                     if (i > 0) {
                         let j = 0, missing = true;
@@ -23116,7 +23168,7 @@ class CubeAnalysisBase {
                             const clone = { x: p.x, y: 0 };
                             base.splice(j, 0, clone);
                             const cobservable = forkJoin(p.x.split(AXES_CODE_DIVIDER).map((k, j) => this._ds.get(this._axisTypeMap[this._xAxis[j]], k))).
-                                pipe(tap(o => clone.name = o.join(AXES_LABEL_DIVIDER)));
+                                pipe(tap$1(o => clone.name = o.join(AXES_LABEL_DIVIDER)));
                             observables.push(cobservable);
                         }
                     }
@@ -23126,7 +23178,7 @@ class CubeAnalysisBase {
                     s.title = index.title;
                 }
                 else if (s.name) {
-                    const sobservable = forkJoin(s.name.split(AXES_CODE_DIVIDER).map((k, i) => this._ds.get(this._axisTypeMap[this._series[i]], k))).pipe(tap(v => s.title = v.join(AXES_LABEL_DIVIDER)));
+                    const sobservable = forkJoin(s.name.split(AXES_CODE_DIVIDER).map((k, i) => this._ds.get(this._axisTypeMap[this._series[i]], k))).pipe(tap$1(v => s.title = v.join(AXES_LABEL_DIVIDER)));
                     observables.push(sobservable);
                 }
             });
@@ -24515,7 +24567,7 @@ class CubeDocumentsGridComponent {
     }
     onBind(data) {
         if (data.length) {
-            const observables = data.map(r => this._accounts.get(r.userId).pipe(tap(u => r.userName = u.name)));
+            const observables = data.map(r => this._accounts.get(r.userId).pipe(tap$1(u => r.userName = u.name)));
             forkJoin(observables).subscribe(() => this.dataSource = data);
         }
         else
@@ -24943,7 +24995,7 @@ class UsageChartComponent extends UsageReportBase {
                 this._series.forEach(a => {
                     const val = row[a.name];
                     const observable = this._type.get(a.dataType, val).
-                        pipe(tap((v) => {
+                        pipe(tap$1((v) => {
                         row[`_${a.name}`] = val;
                         row[a.name] = v || val;
                     }));
@@ -25183,7 +25235,7 @@ class UsagePivotComponent extends UsageReportBase {
             this._xAxis.concat(this._series).forEach(a => {
                 const axis = row[a.name];
                 row[`_${a.name}`] = axis;
-                const observable = this._type.get(a.dataType, axis).pipe(tap(v => row[a.name] = v || axis));
+                const observable = this._type.get(a.dataType, axis).pipe(tap$1(v => row[a.name] = v || axis));
                 observables.push(observable);
             });
         });
@@ -25359,7 +25411,7 @@ let TasksComponent = class TasksComponent {
             this.dataSource = [];
     }
     _decorate(data) {
-        const observables = data.map(r => this._accounts.get(r.userId).pipe(tap(u => r.userName = u.name)));
+        const observables = data.map(r => this._accounts.get(r.userId).pipe(tap$1(u => r.userName = u.name)));
         return forkJoin(observables);
     }
     /**
@@ -26283,7 +26335,7 @@ class CombinationPicker {
             panelClass: 'home-panel'
         });
         merge(overlayRef.backdropClick(), overlayRef.keydownEvents().
-            pipe(filter(e => e.keyCode === ESCAPE || (e.keyCode === UP_ARROW && e.altKey)), tap(e => e.stopPropagation()))).
+            pipe(filter(e => e.keyCode === ESCAPE || (e.keyCode === UP_ARROW && e.altKey)), tap$1(e => e.stopPropagation()))).
             subscribe(() => this.close());
         return overlayRef;
     }
@@ -27396,7 +27448,7 @@ let TimelineViewComponent = class TimelineViewComponent {
                 }
                 if (l.byId) {
                     const who = this._users.get(l.userId), by = this._users.get(l.byId);
-                    const promise = forkJoin(who, by).pipe(tap(ns => {
+                    const promise = forkJoin(who, by).pipe(tap$1(ns => {
                         const [who, by] = ns;
                         task.name = this._translate.get('By', who.name, by.name);
                         //    if (l.role) {
@@ -27407,7 +27459,7 @@ let TimelineViewComponent = class TimelineViewComponent {
                     promisses.push(promise);
                 }
                 else if (l.userId) {
-                    const promise = this._users.get(l.userId).pipe(tap(u => {
+                    const promise = this._users.get(l.userId).pipe(tap$1(u => {
                         task.name = u.name;
                         //    if (l.role) {
                         //        const role = this.session.profile.roles.find(o => o.name === l.role);
@@ -27435,7 +27487,7 @@ let TimelineViewComponent = class TimelineViewComponent {
                 if (r.substituteId) {
                     const by = this._users.get(r.substituteId);
                     const who = this._users.get(r.userId);
-                    const promise = forkJoin(who, by).pipe(tap(u => {
+                    const promise = forkJoin(who, by).pipe(tap$1(u => {
                         task.name = this._translate.get('WhoSubstituting', u[0].name, u[1].name);
                         if (u[0].role)
                             task.name += `, ${u[0].role}`;
@@ -27448,7 +27500,7 @@ let TimelineViewComponent = class TimelineViewComponent {
                     promisses.push(promise);
                 }
                 else {
-                    const promise = this._users.get(r.userId).pipe(tap(u => {
+                    const promise = this._users.get(r.userId).pipe(tap$1(u => {
                         task.name = u.name;
                         if (u.role)
                             task.name += `, ${u.role}`;
@@ -31054,14 +31106,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
 
 let PositionsComponent = class PositionsComponent {
     /** positions ctor */
-    constructor(_session, _utilityRef, _datasources, _ps, _accounts, title, _translate, _popup, _dialog) {
+    constructor(_session, _utilityRef, _datasources, _ps, title, _translate, _popup, _service, _dialog) {
         this._session = _session;
         this._utilityRef = _utilityRef;
         this._datasources = _datasources;
         this._ps = _ps;
-        this._accounts = _accounts;
         this._translate = _translate;
         this._popup = _popup;
+        this._service = _service;
         this._dialog = _dialog;
         this.tools = true;
         this.dirty = false;
@@ -31079,70 +31131,73 @@ let PositionsComponent = class PositionsComponent {
             items: new FormControl(null, Validators.required)
         });
         this._destroy = new Subject();
-        this.types = _session.profile.types.filter(t => t.assignable);
         title.set(_translate.get('Roles'));
     }
     ngOnInit() {
         this.loading = 'query';
-        this._datasources.map('users').subscribe(users => {
-            this.profiles = users;
-            this._utilityRef.populate().subscribe(r => {
-                this._everything = r;
-                const type = this.types.find(t => this._session.profile.roles.findIndex(r => r.dataType === t.name) > -1);
-                type && this.change(type.name);
-                this.loading = null;
-            });
-        });
+        this._prepare().subscribe(() => this._utilityRef.populate().subscribe(r => {
+            this._everything = r;
+            const type = this.datatypes.find(t => this._session.profile.roles.findIndex(r => r.dataType === t.name) > -1);
+            type && this.change(type.name);
+            this.loading = null;
+        }));
+    }
+    _prepare() {
+        return forkJoin(this._service.datatypes().
+            pipe(tap(t => this.datatypes =
+            t.filter(t => t.assignable))), this._datasources.map('users').pipe(tap(u => this.profiles = u)));
     }
     search(value) {
         this.dataSource.filter = value;
     }
     change(name) {
-        const type = this.type = this.types.find(t => t.name === name);
-        const roles = this.roles = this._session.profile.roles.filter(r => r.dataType === name);
-        this.loading = 'query';
-        this._datasources.all(type.name).subscribe(t => {
-            this.source = t;
-            const model = this._everything[type.name];
-            let positions = model.positions;
-            if (!positions)
-                positions = model.positions = {};
-            if (!model.groups)
-                model.groups = [];
-            if (!model.patterns)
-                model.patterns = [];
-            roles.forEach(r => {
-                if (!positions[r.name])
-                    positions[r.name] = {};
-            });
-            this.positions = positions;
-            const rows = [];
-            model.patterns && model.patterns.forEach(p => {
-                const row = { type: 'pattern', key: p.name };
-                row[type.columns ? type.columns[0].name : 'value'] = p.title;
-                rows.push(row);
-            });
-            model.groups && model.groups.forEach(g => {
-                const row = { type: 'group', key: g.name };
-                row[type.columns ? type.columns[0].name : 'value'] = g.title;
-                rows.push(row);
-            });
-            t.forEach(t => {
-                const row = Object.assign({ type: 'key' }, t);
-                type.columns && type.columns.forEach(c => {
-                    row[c.name] = t.value[c.name];
+        return __awaiter(this, void 0, void 0, function* () {
+            const type = this.type = this.datatypes.find(t => t.name === name);
+            const roles = this.roles = this._session.profile.roles.filter(r => r.dataType === name);
+            this.loading = 'query';
+            this._datasources.all(type.name).subscribe(t => {
+                this.source = t;
+                const model = this._everything[type.name];
+                let positions = model.positions;
+                if (!positions)
+                    positions = model.positions = {};
+                if (!model.groups)
+                    model.groups = [];
+                if (!model.patterns)
+                    model.patterns = [];
+                roles.forEach(r => {
+                    if (!positions[r.name])
+                        positions[r.name] = {};
                 });
-                rows.push(row);
+                this.positions = positions;
+                const rows = [];
+                model.patterns && model.patterns.forEach(p => {
+                    const row = { type: 'pattern', key: p.name };
+                    row[type.columns ? type.columns[0].name : 'value'] = p.title;
+                    rows.push(row);
+                });
+                model.groups && model.groups.forEach(g => {
+                    const row = { type: 'group', key: g.name };
+                    row[type.columns ? type.columns[0].name : 'value'] = g.title;
+                    rows.push(row);
+                });
+                t.forEach(t => {
+                    const row = Object.assign({ type: 'key' }, t);
+                    type.columns && type.columns.forEach(c => {
+                        row[c.name] = t.value[c.name];
+                    });
+                    rows.push(row);
+                });
+                this.dataSource = new MatTableDataSource(rows);
+                this.dataSource.sort = this.sort;
+                this._columns();
+                !roles.length &&
+                    this._dialog.open(this.noRoleTpl).afterClosed().subscribe(ok => ok && this.newRole());
+                this.loading = null;
+            }, () => {
+                this.loading = null;
+                this._ps.error();
             });
-            this.dataSource = new MatTableDataSource(rows);
-            this.dataSource.sort = this.sort;
-            this._columns();
-            !roles.length &&
-                this._dialog.open(this.noRoleTpl).afterClosed().subscribe(ok => ok && this.newRole());
-            this.loading = null;
-        }, () => {
-            this.loading = null;
-            this._ps.error();
         });
     }
     _columns() {
@@ -31280,8 +31335,8 @@ let PositionsComponent = class PositionsComponent {
     download() {
         return __awaiter(this, void 0, void 0, function* () {
             const { profiles } = this, worksheets = [];
-            for (let i = 0; i < this.types.length; i++) {
-                let type = this.types[i];
+            for (let i = 0; i < this.datatypes.length; i++) {
+                let type = this.datatypes[i];
                 const model = this._everything[type.name];
                 let positions = model.positions;
                 if (!positions || !Object.keys(positions).length)
@@ -31437,20 +31492,20 @@ let PositionsComponent = class PositionsComponent {
         this._destroy.complete();
     }
 };
-PositionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PositionsComponent, deps: [{ token: SessionService }, { token: UtilityRef }, { token: DatasourceService }, { token: PromptService }, { token: AccountService }, { token: WindowTitleService }, { token: TranslateService }, { token: Popup }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PositionsComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of types\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\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: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i4$3.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: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.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: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { 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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+PositionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PositionsComponent, deps: [{ token: SessionService }, { token: UtilityRef }, { token: DatasourceService }, { token: PromptService }, { token: WindowTitleService }, { token: TranslateService }, { token: Popup }, { token: SystemService }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PositionsComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of datatypes|async\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\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: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i4$3.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: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.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: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { 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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 PositionsComponent = __decorate([
     BizDoc({ selector: 'bizdoc-positions' })
     /** positions component*/
 ], PositionsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PositionsComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of types\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\n"] }]
+            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of datatypes|async\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SessionService }, { type: UtilityRef, decorators: [{
                         type: Inject,
                         args: [UtilityRef]
-                    }] }, { type: DatasourceService }, { type: PromptService }, { type: AccountService }, { type: WindowTitleService }, { type: TranslateService }, { type: Popup }, { type: i2$2.MatDialog }];
+                    }] }, { type: DatasourceService }, { type: PromptService }, { type: WindowTitleService }, { type: TranslateService }, { type: Popup }, { type: SystemService }, { type: i2$2.MatDialog }];
     }, propDecorators: { _fileElement: [{
                 type: ViewChild,
                 args: ['file', { static: true }]
@@ -32339,10 +32394,10 @@ class DesignerItemComponent {
     }
 }
 DesignerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DesignerItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.FormBuilder }, { token: i1$1.DomSanitizer }, { token: DesignerRef }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", view: "view", context: "context" }, outputs: { onContinue: "continue", back: "back", onSave: "save" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", view: "view", context: "context" }, outputs: { onContinue: "continue", back: "back", onSave: "save" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DesignerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-element', template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}\n"] }]
+            args: [{ selector: 'bizdoc-designer-element', template: "  <!--widget mode -->\r\n<ng-container *ngIf=\"mode === 'widget'; else editing\">\r\n  <ng-container *ngIf=\"model.family\">\r\n    <img *ngIf=\"svg[model.family]\" class=\"logo\" [src]=\"resource(svg[model.family])\" [bizdocTooltip]=\"model.family\" />\r\n    <div *ngIf=\"!svg[model.family]\">{{model.family}}</div>\r\n  </ng-container>\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n</ng-container>\r\n<!--add or edit mode-->\r\n<ng-template #editing>\r\n  <ng-container *ngIf=\"mode === 'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\" *ngIf=\"!view\"><mat-icon>save</mat-icon></button>\r\n      <button mat-icon-button (click)=\"viewoff()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"view\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_backspace</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p *ngIf=\"model.resourceType\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  </ng-container>\r\n  <form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </form>\r\n</ng-template>\r\n<ng-template #main>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [formGroup]=\"form\">\r\n    <div class=\"row\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-icon-picker *ngIf=\"icon\" formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"mode === 'edit'\" [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--arguments-->\r\n  <ng-container *ngIf=\"arguments\" (attached)=\"argumentsattached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  <!--options-->\r\n  <ng-container *ngIf=\"options\" (attached)=\"optionsattached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  <!--privileges-->\r\n  <bizdoc-designer-privileges *ngIf=\"form.contains('privileges')\" [form]=\"form.get('privileges')\"></bizdoc-designer-privileges>\r\n  <div class=\"row actions\" *ngIf=\"mode === 'add'\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1}form{padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i1$3.FormBuilder }, { type: i1$1.DomSanitizer }, { type: DesignerRef, decorators: [{
                         type: Inject,
@@ -32434,6 +32489,35 @@ class DesignerTypeElementComponent extends DesignerElementComponentBase {
     }
     ngOnInit() {
     }
+    get _typegroups() {
+        const defaultgroup = { elements: [] }, groups = [];
+        groups['_'] = defaultgroup;
+        this._ref.designer.types.
+            //filter(t => !t.disabled).
+            forEach(t => {
+            if (t.family) {
+                let group = groups[t.family];
+                if (!group) {
+                    group = {
+                        title: t.family,
+                        elements: [t]
+                    };
+                    groups.push(group);
+                    groups[t.family] = group;
+                }
+                else
+                    group.elements.push(t);
+            }
+            else
+                defaultgroup.elements.push(t);
+        });
+        return groups;
+    }
+    datatypeOf(name) {
+        var _a;
+        return (_a = this._ref.designer.
+            types.find(t => t.name == name)) === null || _a === void 0 ? void 0 : _a.title;
+    }
 }
 DesignerTypeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DesignerTypeElementComponent, deps: [{ token: i1$3.FormBuilder }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Directive });
 DesignerTypeElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: DesignerTypeElementComponent, viewQueries: [{ propertyName: "designer", first: true, predicate: DesignerItemComponent, descendants: true }], usesInheritance: true, ngImport: i0 });
@@ -32697,7 +32781,7 @@ class ActionDesignerComponent extends DesignerTypeElementComponent {
     }
 }
 ActionDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionDesignerComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div>\r\n        <mat-checkbox formControlName=\"multiple\">{{'EnableMultipleSelection'|translate}}</mat-checkbox>\r\n      </div>\r\n      <h2 class=\"mat-title\">{{'Labels'|translate}}</h2>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"Past\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"verb\" [placeholder]=\"Verb\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjective\" [placeholder]=\"Adjective\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjectivePlural\" [placeholder]=\"AdjectivePlural\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"you\" [placeholder]=\"You\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <div>\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ActionDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionDesignerComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div>\r\n        <mat-checkbox formControlName=\"multiple\">{{'EnableMultipleSelection'|translate}}</mat-checkbox>\r\n      </div>\r\n      <h2 class=\"mat-title\">{{'Labels'|translate}}</h2>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"Past\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"verb\" [placeholder]=\"Verb\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjective\" [placeholder]=\"Adjective\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjectivePlural\" [placeholder]=\"AdjectivePlural\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"you\" [placeholder]=\"You\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <div>\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionDesignerComponent, decorators: [{
             type: Component,
             args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div>\r\n        <mat-checkbox formControlName=\"multiple\">{{'EnableMultipleSelection'|translate}}</mat-checkbox>\r\n      </div>\r\n      <h2 class=\"mat-title\">{{'Labels'|translate}}</h2>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"Past\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"verb\" [placeholder]=\"Verb\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjective\" [placeholder]=\"Adjective\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"adjectivePlural\" [placeholder]=\"AdjectivePlural\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"you\" [placeholder]=\"You\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <div>\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
@@ -32711,15 +32795,16 @@ class AttributeDesignComponent extends DesignerTypeElementComponent {
         });
     }
     ngOnInit() {
-        this.datatypes = this._ref.designer.types;
+        if (this.mode !== 'widget')
+            this.datatypes = super._typegroups;
         super.ngOnInit();
     }
 }
 AttributeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AttributeDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AttributeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AttributeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select required formControlName=\"dataType\">\r\n          <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title|localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+AttributeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AttributeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select required formControlName=\"dataType\">\r\n          <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n          <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n            <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n              {{t.title}}\r\n            </mat-option>\r\n          </mat-optgroup>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AttributeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select required formControlName=\"dataType\">\r\n          <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title|localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select required formControlName=\"dataType\">\r\n          <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n          <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n            <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n              {{t.title}}\r\n            </mat-option>\r\n          </mat-optgroup>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
 class ControlDesignComponent extends DesignerTypeElementComponent {
@@ -32731,7 +32816,8 @@ class ControlDesignComponent extends DesignerTypeElementComponent {
         });
     }
     ngOnInit() {
-        this.datatypes = this._ref.designer.types;
+        if (this.mode !== 'widget')
+            this.datatypes = super._typegroups;
         super.ngOnInit();
     }
 }
@@ -32842,9 +32928,6 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
             anomaly: this._fb.control('Positions'),
         }, { /*validators: this._cubeAxesValidator*/});
         this.syncing = false;
-        this.types = ref.designer.types.filter(t => !t.disabled).
-            sort((a, b) => a.title < b.title ? -1 : 1);
-        this.currencies = ref.designer.currencies;
     }
     sync() {
         this.syncing = true;
@@ -32867,7 +32950,7 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
                 });
                 break;
             case 'edit':
-                this._buildForm();
+                this._form();
                 break;
         }
         super.ngOnInit();
@@ -32879,8 +32962,11 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
         setTimeout(() => {
         }, ms + 600000);
     }
-    _buildForm() {
+    _form() {
         var _a, _b, _c;
+        this.datatypes = super._typegroups;
+        this.guides = this._ref.designer.guides;
+        this.currencies = this._ref.designer.currencies;
         this.model.axes.forEach(a => {
             this.axes.push(this.newAxis(a), { emitEvent: false });
         });
@@ -32888,25 +32974,27 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
         (_b = this.model.patterns) === null || _b === void 0 ? void 0 : _b.forEach(p => this.patterns.push(this.newPattern(p), { emitEvent: false }));
         (_c = this.model.views) === null || _c === void 0 ? void 0 : _c.forEach(v => {
             v.xAxis = coerceArray(v.xAxis);
-            v.series = coerceArray(v.series);
-            v.indices = coerceArray(v.indices);
+            if (v.series)
+                v.series = coerceArray(v.series);
+            if (v.indices)
+                v.indices = coerceArray(v.indices);
             this.views.push(this.newView(v), { emitEvent: false });
         });
     }
     complete() {
-        this._buildForm();
+        this._form();
         if (!this.model.privileges)
             this.model.privileges = {};
         super.ngOnInit();
     }
     nameOf(axis) { return this.model.axes.filter(a => isArray(axis) ? axis.indexOf(a.name) > -1 : a.name === axis).join(', '); }
     newView(model) {
-        const name = this._fb.control(model === null || model === void 0 ? void 0 : model.name, Validators.required), title = this._fb.control(model === null || model === void 0 ? void 0 : model.title, Validators.required), xAxis = this._fb.control(model === null || model === void 0 ? void 0 : model.xAxis, Validators.required), chartType = this._fb.control((model === null || model === void 0 ? void 0 : model.chartType) || null), indicesChartType = this._fb.control((model === null || model === void 0 ? void 0 : model.indicesChartType) || null), series = this._fb.control(model === null || model === void 0 ? void 0 : model.series), indices = this._fb.control(model === null || model === void 0 ? void 0 : model.indices), type = this._fb.control((model === null || model === void 0 ? void 0 : model.type) || 'Chart');
+        const name = this._fb.control(model === null || model === void 0 ? void 0 : model.name, Validators.required), title = this._fb.control(model === null || model === void 0 ? void 0 : model.title, Validators.required), xAxis = this._fb.control(model === null || model === void 0 ? void 0 : model.xAxis, Validators.required), chartType = this._fb.control((model === null || model === void 0 ? void 0 : model.chartType) || null), indicesChartType = this._fb.control((model === null || model === void 0 ? void 0 : model.indicesChartType) || null), series = this._fb.control(model === null || model === void 0 ? void 0 : model.series), indices = this._fb.control(model === null || model === void 0 ? void 0 : model.indices), guide = this._fb.control(model === null || model === void 0 ? void 0 : model.guide), type = this._fb.control((model === null || model === void 0 ? void 0 : model.type) || 'Chart');
         if (!model || this.model.draft)
             title.valueChanges.
                 subscribe(t => name.setValue(programName(t)));
         if (!model || !model.xAxis)
-            series.disable({ emitEvent: false });
+            series.disable();
         xAxis.valueChanges.subscribe(v => {
             if (v && v.length) {
                 series.enable({ emitEvent: false });
@@ -32918,9 +33006,10 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
             else
                 series.disable({ emitEvent: false });
         });
+        !this.guides.length && guide.disable();
         if (!this.indices.length) {
-            indices.disable({ emitEvent: false });
-            indicesChartType.disable({ emitEvent: false });
+            indices.disable();
+            indicesChartType.disable();
         }
         else
             indices.valueChanges.pipe(startWith$1(model === null || model === void 0 ? void 0 : model.indices)).subscribe(v => {
@@ -33002,13 +33091,12 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
             roles: this._fb.control(model === null || model === void 0 ? void 0 : model.roles),
         });
     }
-    datatype(name) { var _a; return (_a = this.types.find(t => t.name == name)) === null || _a === void 0 ? void 0 : _a.title; }
 }
 CubeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CubeDesignComponent, deps: [{ token: i1$3.FormBuilder }, { token: SystemService }, { token: PromptService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-CubeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CubeDesignComponent, selector: "ng-component", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n            <td class=\"mat-cell\">{{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.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #indexform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </form>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length || form.get('indices').value.length\">\r\n              <mat-option value=\"Pie\">{{'Pie'|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=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n              <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n            </mat-optgroup>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length<2\">\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=\"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=\"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-optgroup>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length<2\">\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=\"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=\"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-optgroup>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('indices').value.length<2\">\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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n              <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n              <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n              <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            </mat-optgroup>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length<2\">\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=\"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=\"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-optgroup>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </form>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <ng-container *ngFor=\"let t of types\">\r\n          <mat-option *ngIf=\"t.name\" [value]=\"t.name\">\r\n            <span *ngIf=\"t.family\">{{t.family}} -&nbsp;</span>\r\n            {{t.title}}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-radio-group p{margin-inline-start:8px}.mat-table{width:100%}.mat-table .mat-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{float:left;width:35%;padding:0;margin:0;clear:both}dd{float:left;width:65%;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i6$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+CubeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CubeDesignComponent, selector: "ng-component", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n            <td class=\"mat-cell\">{{datatypeOf(a.dataType)}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n      <!--<div *ngIf=\"model.indices?.length\">\r\n        <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!--idx-->\r\n<ng-template #indexform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Pie\" [disabled]=\"form.get('series').value?.length>0\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\" [disabled]=\"form.get('series').value?.length>0\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\" [disabled]=\"form.get('series').value?.length>0\">{{'Pyramid'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Guide'|translate}}</mat-label>\r\n      <mat-select formControlName=\"guide\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </div>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n        <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n          <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n        </mat-optgroup>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-radio-group p{margin-inline-start:8px}.mat-table{width:100%}.mat-table .mat-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{float:left;width:35%;padding:0;margin:0;clear:both}dd{float:left;width:65%;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i6$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CubeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n            <td class=\"mat-cell\">{{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.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #indexform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </form>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length || form.get('indices').value.length\">\r\n              <mat-option value=\"Pie\">{{'Pie'|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=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n              <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n            </mat-optgroup>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length<2\">\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=\"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=\"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-optgroup>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length<2\">\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=\"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=\"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-optgroup>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('indices').value.length<2\">\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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n              <mat-option value=\"StackingBar100\">{{'StackingBar100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n              <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n              <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            </mat-optgroup>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-optgroup [disabled]=\"form.get('series').value.length<2\">\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=\"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=\"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-optgroup>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </form>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <ng-container *ngFor=\"let t of types\">\r\n          <mat-option *ngIf=\"t.name\" [value]=\"t.name\">\r\n            <span *ngIf=\"t.family\">{{t.family}} -&nbsp;</span>\r\n            {{t.title}}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-radio-group p{margin-inline-start:8px}.mat-table{width:100%}.mat-table .mat-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{float:left;width:35%;padding:0;margin:0;clear:both}dd{float:left;width:65%;padding:0;margin:0}\n"] }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl *ngIf=\"jobInfo\">\r\n      <ng-container *ngIf=\"jobInfo.lastExecution\">\r\n        <dt>{{'LastExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.lastExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.nextExecution\">\r\n        <dt>{{'NextExecution'|translate}}</dt>\r\n        <dd>{{jobInfo.nextExecution|amTimeAgo}}</dd>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"jobInfo.lastJobState\">\r\n        <dt>{{'LastJobState'|translate}}</dt>\r\n        <dd>\r\n          <mat-icon *ngIf=\"jobInfo.error\" [bizdocTooltip]=\"jobInfo.error\">report</mat-icon>\r\n          <span class=\"job-state\">{{jobInfo.lastJobState| translate}}</span>\r\n        </dd>\r\n      </ng-container>\r\n    </dl>\r\n    <div class=\"row start center\">\r\n      <button mat-stroked-button (click)=\"sync()\" [disabled]=\"model.draft || syncing\">\r\n        <span> {{'Synchronize'|translate}}</span>\r\n      </button>\r\n      &nbsp;\r\n      <mat-spinner *ngIf=\"syncing\" diameter=\"22\"></mat-spinner>\r\n    </div>\r\n    <div class=\"row\">\r\n      <!--<div *ngIf=\"model.axes?.length\">\r\n        <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n            <td class=\"mat-cell\">{{datatypeOf(a.dataType)}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n      <!--<div *ngIf=\"model.indices?.length\">\r\n        <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n        <table class=\"mat-table\">\r\n          <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n            <td class=\"mat-cell\">{{a.title}}</td>\r\n          </tr>\r\n        </table>\r\n      </div>-->\r\n    </div>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n      <mat-radio-group formControlName=\"scope\">\r\n        <p></p>\r\n        <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityGlobalHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPositionsHelp'|translate}}</p>\r\n        <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n        <p>{{'SecurityPatternsHelp'|translate}}</p>\r\n      </mat-radio-group>\r\n      <ng-container formGroupName=\"yAxis\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Type'|translate}}</mat-label>\r\n          <mat-select formControlName=\"type\">\r\n            <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\r\n            <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\r\n            <mat-option value=\"Count\">{{'Accumulative'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field>\r\n        <mat-label>{{'Currency'|translate}}</mat-label>\r\n        <mat-select formControlName=\"currencyCode\" [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let c of currencies\" [value]=\"c.name\">{{c.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Axes-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Axes'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(axes, newAxis(), 'Axis', axisform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"axes\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{a.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(a, 'Axis', axisform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"axes.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Indices-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Indices'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(indices, newIndex(), 'Index', indexform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let i of indices.controls; index as index\" [formGroup]=\"i\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{i.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(i, 'Index', indexform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"indices.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field *ngIf=\"indices.controls.length\">\r\n        <mat-label>{{'AnomalyNotification'|translate}}</mat-label>\r\n        <mat-select formControlName=\"anomaly\">\r\n          <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n          <mat-option value=\"Positions\">{{'Positions'|translate}}</mat-option>\r\n          <mat-option value=\"Recipients\">{{'Everyone'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <!--Patterns-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"indices\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{p.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <!--Views-->\r\n      <h2 class=\"row mat-title\">\r\n        {{'CubeViews'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(views, newView(), 'CubeView', viewform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"views\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, views)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\">\r\n            {{v.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"edit(v, 'View', viewform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"views.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-form-field>\r\n        <mat-label>{{'Schedule'|translate}}</mat-label>\r\n        <bizdoc-timespan-input formControlName=\"schedule\"></bizdoc-timespan-input>\r\n        <mat-icon matSuffix>timer</mat-icon>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!--idx-->\r\n<ng-template #indexform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!-- pattern-->\r\n<ng-template #patternform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter [cube]=\"model\" [form]=\"form.get('axes')\"></bizdoc-designer-cube-filter>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n<!-- view -->\r\n<ng-template #viewform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Type'|translate}}</mat-label>\r\n      <mat-select formControlName=\"type\">\r\n        <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n        <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n        <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n        <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of axes.controls\" [value]=\"a.get('name').value\">{{a.get('title').value || a.get('name').value}}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple [sortComparator]=\"sortComparator\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"form.get('xAxis').value?.indexOf(a.get('name').value)<0\">{{a.get('title').value|| a.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <ng-container *ngFor=\"let i of indices.controls\">\r\n          <mat-option [value]=\"i.get('name').value\">{{i.get('title').value|| i.get('name').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Pie\" [disabled]=\"form.get('series').value?.length>0\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\" [disabled]=\"form.get('series').value?.length>0\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\" [disabled]=\"form.get('series').value?.length>0\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\" [disabled]=\"form.get('series').value?.length>0\">{{'Pyramid'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"!form.get('series').value?.length\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"!form.get('series').value?.length\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indicesChartType\">\r\n        <ng-container [ngSwitch]=\"form.get('type').value\">\r\n          <ng-container *ngSwitchCase=\"'Chart'\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('indices').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngSwitchCase=\"'Pivot'\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\" [disabled]=\"form.get('series').value?.length<2\">{{'StackingLine100'|translate}}</mat-option>\r\n          </ng-container>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Guide'|translate}}</mat-label>\r\n      <mat-select formControlName=\"guide\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <bizdoc-designer-cube-filter *ngIf=\"cube\" [cube]=\"cube\" [form]=\"form.get('filters')\"></bizdoc-designer-cube-filter>\r\n  </div>\r\n</ng-template>\r\n<!-- Axis -->\r\n<ng-template #axisform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n          {{t.title}}\r\n        </mat-option>\r\n        <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n          <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n        </mat-optgroup>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('DataType'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"combination\">{{'Combination'|translate}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'|translate}}</mat-checkbox></div>\r\n    <mat-form-field>\r\n      <mat-label>{{'SelectionMode'|translate}}</mat-label>\r\n      <mat-select formControlName=\"selectionMode\">\r\n        <mat-option value=\"None\">{{'None'|translate}}</mat-option>\r\n        <mat-option>{{'OneMode'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Autocomplete'|translate}}</mat-option>\r\n        <mat-option value=\"Pattern\">{{'Pattern'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'DescendentOf'|translate}}</mat-label>\r\n      <mat-select formControlName=\"descendentOf\">\r\n        <ng-container *ngFor=\"let a of axes.controls\">\r\n          <mat-option [value]=\"a.get('name').value\" *ngIf=\"a!=form\">{{a.get('title').value}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div><mat-checkbox formControlName=\"indexable\">{{'Indexable'|translate}}</mat-checkbox></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep form{min-width:350px}:host ::ng-deep .mat-radio-group p{margin-inline-start:8px}.mat-table{width:100%}.mat-table .mat-cell:last-child{width:80px}.flex{flex:1}table tr td:first-child{width:26px}dl{width:100%;overflow:hidden;padding:0;margin:0}dt{float:left;width:35%;padding:0;margin:0;clear:both}dd{float:left;width:65%;padding:0;margin:0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.FormBuilder }, { type: SystemService }, { type: PromptService }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
                         type: Inject,
@@ -33153,7 +33241,7 @@ class FormInviteDialog {
     }
 }
 FormInviteDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormInviteDialog, deps: [{ token: i1$3.FormBuilder }, { token: SystemService }, { token: PromptService }, { token: DesignerRef }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component });
-FormInviteDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormInviteDialog, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field>\r\n    <mat-chip-list #chips [attr.aria-label]=\"''\" multiple required>\r\n      <mat-chip *ngFor=\"let r of groups.value\"\r\n                (removed)=\"removeRole(r)\">\r\n        {{titleOf(r)}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n      <input [placeholder]=\"'Roles'|translate\" required\r\n             [formControl]=search\r\n             #inputrole\r\n             [matAutocomplete]=\"rolename\"\r\n             [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    </mat-chip-list>\r\n    <mat-autocomplete #rolename=\"matAutocomplete\" (optionSelected)=\"addRole(inputrole, $event)\">\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">\r\n        {{r.title || r.name}}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.get('groups').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Roles'|translate)\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-localized-string formControlName=\"message\" [placeholder]=\"'Message'|translate\" class=\"flex column\" maxlength=\"400\"></bizdoc-localized-string>\r\n  <mat-form-field>\r\n    <mat-label>{{'InviteDue' | l18n}}</mat-label>\r\n    <input matInput formControlName=\"due\"\r\n           [matDatepicker]=\"duePicker\" />\r\n    <mat-datepicker-toggle [for]=\"duePicker\" matSuffix></mat-datepicker-toggle>\r\n    <mat-datepicker #duePicker></mat-datepicker>\r\n    <mat-error *ngIf=\"form.get('due').hasError('min')\" [innerHTML]=\"'DateInPastErr'|translate:(label||name)\"></mat-error>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"oneTime\">{{'OneTime'|l18n}}</mat-checkbox>\r\n  <mat-selection-list formControlName=\"devices\" multiple>\r\n    <mat-list-option *ngFor=\"let d of devices\" [value]=\"d\">{{d|translate}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <button mat-raised-button color=\"primary\" (click)=\"send()\" [disabled]=\"!form.valid || working\">{{'Send'|l18n}}</button>\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$3.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormInviteDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormInviteDialog, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field>\r\n    <mat-chip-list #chips [attr.aria-label]=\"''\" multiple required>\r\n      <mat-chip *ngFor=\"let r of groups.value\"\r\n                (removed)=\"removeRole(r)\">\r\n        {{titleOf(r)}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n      <input [placeholder]=\"'Roles'|translate\" required\r\n             [formControl]=search\r\n             #inputrole\r\n             [matAutocomplete]=\"rolename\"\r\n             [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    </mat-chip-list>\r\n    <mat-autocomplete #rolename=\"matAutocomplete\" (optionSelected)=\"addRole(inputrole, $event)\">\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">\r\n        {{r.title || r.name}}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.get('groups').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Roles'|translate)\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-localized-string formControlName=\"message\" [placeholder]=\"'Message'|translate\" class=\"flex column\" maxlength=\"400\"></bizdoc-localized-string>\r\n  <mat-form-field>\r\n    <mat-label>{{'InviteDue' | l18n}}</mat-label>\r\n    <input matInput formControlName=\"due\"\r\n           [matDatepicker]=\"duePicker\" />\r\n    <mat-datepicker-toggle [for]=\"duePicker\" matSuffix></mat-datepicker-toggle>\r\n    <mat-datepicker #duePicker></mat-datepicker>\r\n    <mat-error *ngIf=\"form.get('due').hasError('min')\" [innerHTML]=\"'DateInPastErr'|translate:(label||name)\"></mat-error>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"oneTime\">{{'OneTime'|l18n}}</mat-checkbox>\r\n  <mat-selection-list formControlName=\"devices\" multiple>\r\n    <mat-list-option *ngFor=\"let d of devices\" [value]=\"d\">{{d|translate}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <button mat-raised-button color=\"primary\" (click)=\"send()\" [disabled]=\"!form.valid || working\">{{'Send'|l18n}}</button>\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$3.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormInviteDialog, decorators: [{
             type: Component,
             args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field>\r\n    <mat-chip-list #chips [attr.aria-label]=\"''\" multiple required>\r\n      <mat-chip *ngFor=\"let r of groups.value\"\r\n                (removed)=\"removeRole(r)\">\r\n        {{titleOf(r)}}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n      <input [placeholder]=\"'Roles'|translate\" required\r\n             [formControl]=search\r\n             #inputrole\r\n             [matAutocomplete]=\"rolename\"\r\n             [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    </mat-chip-list>\r\n    <mat-autocomplete #rolename=\"matAutocomplete\" (optionSelected)=\"addRole(inputrole, $event)\">\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">\r\n        {{r.title || r.name}}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.get('groups').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Roles'|translate)\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-localized-string formControlName=\"message\" [placeholder]=\"'Message'|translate\" class=\"flex column\" maxlength=\"400\"></bizdoc-localized-string>\r\n  <mat-form-field>\r\n    <mat-label>{{'InviteDue' | l18n}}</mat-label>\r\n    <input matInput formControlName=\"due\"\r\n           [matDatepicker]=\"duePicker\" />\r\n    <mat-datepicker-toggle [for]=\"duePicker\" matSuffix></mat-datepicker-toggle>\r\n    <mat-datepicker #duePicker></mat-datepicker>\r\n    <mat-error *ngIf=\"form.get('due').hasError('min')\" [innerHTML]=\"'DateInPastErr'|translate:(label||name)\"></mat-error>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"oneTime\">{{'OneTime'|l18n}}</mat-checkbox>\r\n  <mat-selection-list formControlName=\"devices\" multiple>\r\n    <mat-list-option *ngFor=\"let d of devices\" [value]=\"d\">{{d|translate}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <button mat-raised-button color=\"primary\" (click)=\"send()\" [disabled]=\"!form.valid || working\">{{'Send'|l18n}}</button>\r\n</form>\r\n", styles: ["form{padding:8px}\n"] }]
@@ -33215,8 +33303,6 @@ class FormDesignComponent extends DesignerTypeElementComponent {
             this.theme = t.dark ? 'MaterialDark' : 'Material';
             this.primary = this._session.getPrimery();
         });
-        this.guides = ref.designer.guides;
-        this.cubes = ref.designer.cubes;
     }
     ngOnInit() {
         var _a;
@@ -33248,6 +33334,8 @@ class FormDesignComponent extends DesignerTypeElementComponent {
             });
             this.model.resourceType && this.disable('group', 'description');
             this._ref.unlock().subscribe(() => this.enable('group', 'description'));
+            this.guides = this._ref.designer.guides;
+            this.cubes = this._ref.designer.cubes;
         }
         super.ngOnInit();
     }
@@ -33282,7 +33370,7 @@ class FormDesignComponent extends DesignerTypeElementComponent {
     }
 }
 FormDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormDesignComponent, deps: [{ token: i1$3.FormBuilder }, { token: PanesRouter }, { token: SystemService }, { token: SessionService }, { token: i0.Injector }, { token: TranslateService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-FormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (dataLabelRendering)=\"dataLabelRendering($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cubes.length\">\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      <!--Rules-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', ruleform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let r of rules.controls; index as index\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\" width=\"99%\">\r\n            {{r.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', ruleform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #ruleform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i12.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$1.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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (dataLabelRendering)=\"dataLabelRendering($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cubes.length\">\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      <!--Rules-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', ruleform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let r of rules.controls; index as index\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\" width=\"99%\">\r\n            {{r.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', ruleform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #ruleform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i12.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$1.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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormDesignComponent, decorators: [{
             type: Component,
             args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [view]=\"view\" (back)=\"view = null\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (dataLabelRendering)=\"dataLabelRendering($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cubes.length\">\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          <mat-option *ngFor=\"let c of cubes\" [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      <!--Rules-->\r\n      <h2 class=\"mat-title row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', ruleform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let r of rules.controls; index as index\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell flex\" width=\"99%\">\r\n            {{r.get('title').value}}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', ruleform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #ruleform let-form>\r\n  <div [formGroup]=\"form\" class=\"column\">\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n        <mat-error *ngIf=\"form.get('title').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n  </div>\r\n</ng-template>\r\n" }]
@@ -33366,14 +33454,15 @@ class ReportDesignerComponent extends DesignerTypeElementComponent {
     }
     ngOnInit() {
         this.guides = this._ref.designer.guides;
+        !this.guides.length && this.disable('guide');
         super.ngOnInit();
     }
 }
 ReportDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ReportDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ReportDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ReportDesignerComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ReportDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ReportDesignerComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ReportDesignerComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
 class RoleDesignComponent extends DesignerTypeElementComponent {
@@ -33387,7 +33476,7 @@ class RoleDesignComponent extends DesignerTypeElementComponent {
     }
     ngOnInit() {
         if (this.mode !== 'widget') {
-            this.types = this._ref.designer.types /*.filter(t => t.assignable)*/;
+            this.datatypes = super._typegroups;
             this.mode === 'edit' && this.form.get('dataType').disable({ emitEvent: false });
             this.dataTypeDisabled = !this.model.draft;
         }
@@ -33399,10 +33488,10 @@ class RoleDesignComponent extends DesignerTypeElementComponent {
     }
 }
 RoleDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: RoleDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RoleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: RoleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\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-hint *ngIf=\"dataTypeDisabled\"><a (click)=\"enableTypeEdit()\">{{'change'|translate}}</a></mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'SequencePolicy'|translate}}</mat-label>\r\n        <mat-select formControlName=\"sequencePolicy\">\r\n          <mat-option value=\"Higher\">{{'Higher'|translate}}</mat-option>\r\n          <mat-option value=\"Earlier\">{{'Earlier'|translate}}</mat-option>\r\n          <mat-option value=\"Strict\">{{'Strict'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Priority'|translate}}</mat-label>\r\n        <input matInput type=\"number\" formControlName=\"priority\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+RoleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: RoleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"dataType\" required>\r\n          <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n          <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n            <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n              {{t.title}}\r\n            </mat-option>\r\n          </mat-optgroup>\r\n        </mat-select>\r\n        <mat-hint *ngIf=\"dataTypeDisabled\"><a (click)=\"enableTypeEdit()\">{{'ChangeValue'|translate}}</a></mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'SequencePolicy'|translate}}</mat-label>\r\n        <mat-select formControlName=\"sequencePolicy\">\r\n          <mat-option value=\"Higher\">{{'Higher'|translate}}</mat-option>\r\n          <mat-option value=\"Earlier\">{{'Earlier'|translate}}</mat-option>\r\n          <mat-option value=\"Strict\">{{'Strict'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Priority'|translate}}</mat-label>\r\n        <input matInput type=\"number\" formControlName=\"priority\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: RoleDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\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-hint *ngIf=\"dataTypeDisabled\"><a (click)=\"enableTypeEdit()\">{{'change'|translate}}</a></mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'SequencePolicy'|translate}}</mat-label>\r\n        <mat-select formControlName=\"sequencePolicy\">\r\n          <mat-option value=\"Higher\">{{'Higher'|translate}}</mat-option>\r\n          <mat-option value=\"Earlier\">{{'Earlier'|translate}}</mat-option>\r\n          <mat-option value=\"Strict\">{{'Strict'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Priority'|translate}}</mat-label>\r\n        <input matInput type=\"number\" formControlName=\"priority\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"dataType\" required>\r\n          <mat-option *ngFor=\"let t of datatypes['_'].elements|sort: 'title'\" [value]=\"t.name\">\r\n            {{t.title}}\r\n          </mat-option>\r\n          <mat-optgroup *ngFor=\"let g of datatypes|sort: 'title'\" [label]=\"g.title\">\r\n            <mat-option *ngFor=\"let t of g.elements|sort: 'title'\" [value]=\"t.name\">\r\n              {{t.title}}\r\n            </mat-option>\r\n          </mat-optgroup>\r\n        </mat-select>\r\n        <mat-hint *ngIf=\"dataTypeDisabled\"><a (click)=\"enableTypeEdit()\">{{'ChangeValue'|translate}}</a></mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'SequencePolicy'|translate}}</mat-label>\r\n        <mat-select formControlName=\"sequencePolicy\">\r\n          <mat-option value=\"Higher\">{{'Higher'|translate}}</mat-option>\r\n          <mat-option value=\"Earlier\">{{'Earlier'|translate}}</mat-option>\r\n          <mat-option value=\"Strict\">{{'Strict'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Priority'|translate}}</mat-label>\r\n        <input matInput type=\"number\" formControlName=\"priority\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
 class RuleDesignComponent extends DesignerTypeElementComponent {
@@ -33438,7 +33527,7 @@ class StateDesignComponent extends DesignerTypeElementComponent {
     }
 }
 StateDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: StateDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row\">\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n        <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"'Past'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"future\" [placeholder]=\"'Future'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row\">\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n        <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"'Past'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"future\" [placeholder]=\"'Future'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: StateDesignComponent, decorators: [{
             type: Component,
             args: [{ template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <div class=\"row\">\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n        <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"past\" [placeholder]=\"'Past'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"future\" [placeholder]=\"'Future'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
@@ -33455,7 +33544,7 @@ class TypeDesignComponent extends DesignerTypeElementComponent {
         this.form = this._fb.group({
             assignable: null,
             groups: this.groups,
-            patterns: this.patterns
+            tpatterns: this.patterns
         });
     }
     ngOnInit() {
@@ -33493,10 +33582,10 @@ class TypeDesignComponent extends DesignerTypeElementComponent {
     }
 }
 TypeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TypeDesignComponent, deps: [{ token: i1$3.FormBuilder }, { token: DatasourceService }, { token: TranslateService }, { token: PromptService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-TypeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"patterns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$1.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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+TypeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"tpatterns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$1.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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TypeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"patterns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\"\r\n                         [view]=\"view\" (back)=\"view = null\"\r\n                         [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"test()\">{{'TestType'|translate}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template bizdocEditContent>\r\n    <div [formGroup]=\"form\" class=\"column\">\r\n      <h2 class=\"mat-title row\">\r\n        {{'Groups'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(groups, newGroup(), 'Group', groupform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"groups\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, groups)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let g of groups.controls; index as index\" [formGroup]=\"g\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{g.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(g, 'Group', groupform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"groups.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <h2 class=\"mat-title row\">\r\n        {{'Patterns'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(patterns, newPattern(), 'Pattern', patternform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"tpatterns\" class=\"mat-table\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n        <tr class=\"mat-row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n          <td class=\"mat-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-cell\" width=\"99%\">\r\n            {{p.get('title').value }}\r\n          </td>\r\n          <td class=\"mat-cell\" style=\"word-break:keep-all\">\r\n            <button mat-icon-button (click)=\"edit(p, 'Pattern', patternform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"patterns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n    </div>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<ng-template #groupform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Items'|translate}}</mat-label>\r\n      <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n        <!--<mat-select-trigger>\r\n          {{group.value.items ? group.value.items[0] : ''}}\r\n          <span *ngIf=\"form.value.items?.length > 1\">\r\n            (+{{form.value.items.length - 1}} {{(form.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n          </span>\r\n        </mat-select-trigger>-->\r\n        <!--<mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n          <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n          <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n        </mat-option>-->\r\n        <mat-option *ngFor=\"let v of values\" [value]=\"v.key\">\r\n          <span>{{v.value}}</span>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('items').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Items'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #patternform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n      <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Regex'|translate}}</mat-label>\r\n      <input matInput formControlName=\"expression\" required />\r\n      <mat-error *ngIf=\"form.get('expression').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Expression'|translate)\"></mat-error>\r\n      <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$3.FormBuilder }, { type: DatasourceService }, { type: TranslateService }, { type: PromptService }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
                         type: Inject,
@@ -33539,14 +33628,15 @@ class WidgetDesignComponent extends DesignerTypeElementComponent {
     }
     ngOnInit() {
         this.guides = this._ref.designer.guides;
+        !this.guides.length && this.disable('guide');
         super.ngOnInit();
     }
 }
 WidgetDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WidgetDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-WidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: WidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+WidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: WidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "view", "context"], outputs: ["continue", "back", "save"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: WidgetDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field *ngIf=\"guides.length\">\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+            args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
 const CHARACTER = /[\w]|Spacebar/;
@@ -33668,7 +33758,8 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         eclone = clone(eclone); // deep
         const injector = this._createInjector(eclone, mode);
         return new Promise((resolve, reject) => this._panes.navigate(section.comp, {
-            policy: mode === 'add' ? OpenPolicy.Dialog | OpenPolicy.Stretch : OpenPolicy.Tab | OpenPolicy.Toggle,
+            policy: mode === 'add' ? OpenPolicy.Dialog | OpenPolicy.Stretch :
+                OpenPolicy.Tab | OpenPolicy.Toggle | OpenPolicy.Defer,
             group: this._translate.get(section.type),
             //title,
             injector: injector
@@ -33824,10 +33915,10 @@ class ControlPropertiesComponent {
     save() { this._paneRef.close(this.form.value); }
 }
 ControlPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ControlPropertiesComponent, deps: [{ token: i1$3.FormBuilder }, { token: SystemService }, { token: BizDocComponentFactoryResolver }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component });
-ControlPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ControlPropertiesComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "design", first: true, predicate: ["design"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form?.dirty || !form?.valid\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Name'|translate}}</mat-label>\r\n    <input matInput required formControlName=\"name\" />\r\n    <mat-error *ngIf=\"form.get('name').hasError('pattern')\" [innerHTML]=\"'ProgramPatternErr'|translate\"></mat-error>\r\n    <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'Field'\"></mat-error>\r\n  </mat-form-field>\r\n\r\n  <ng-container #design>\r\n  </ng-container>\r\n  <mat-checkbox formControlName=\"required\">{{'Mandatory'|translate}}</mat-checkbox>\r\n  <mat-checkbox formControlName=\"autofill\">{{'Autofill'|translate}}</mat-checkbox>\r\n</form>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column}form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ControlPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ControlPropertiesComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "design", first: true, predicate: ["design"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form?.dirty || !form?.valid\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Name'|translate}}</mat-label>\r\n    <input matInput required formControlName=\"name\" />\r\n    <mat-error *ngIf=\"form.get('name').hasError('pattern')\" [innerHTML]=\"'ProgramPatternErr'|translate\"></mat-error>\r\n    <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'Field'\"></mat-error>\r\n  </mat-form-field>\r\n\r\n  <ng-container #design>\r\n  </ng-container>\r\n  <mat-checkbox formControlName=\"required\">{{'Mandatory'|translate}}</mat-checkbox>\r\n  <mat-checkbox formControlName=\"autofill\">{{'Autofill'|translate}}</mat-checkbox>\r\n</form>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column}form{padding:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: "component", type: i9$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ControlPropertiesComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form?.dirty || !form?.valid\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Name'|translate}}</mat-label>\r\n    <input matInput required formControlName=\"name\" />\r\n    <mat-error *ngIf=\"form.get('name').hasError('pattern')\" [innerHTML]=\"'ProgramPatternErr'|translate\"></mat-error>\r\n    <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'Field'\"></mat-error>\r\n  </mat-form-field>\r\n\r\n  <ng-container #design>\r\n  </ng-container>\r\n  <mat-checkbox formControlName=\"required\">{{'Mandatory'|translate}}</mat-checkbox>\r\n  <mat-checkbox formControlName=\"autofill\">{{'Autofill'|translate}}</mat-checkbox>\r\n</form>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column}form{padding:8px}\n"] }]
+            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form?.dirty || !form?.valid\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Name'|translate}}</mat-label>\r\n    <input matInput required formControlName=\"name\" />\r\n    <mat-error *ngIf=\"form.get('name').hasError('pattern')\" [innerHTML]=\"'ProgramPatternErr'|translate\"></mat-error>\r\n    <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'Field'\"></mat-error>\r\n  </mat-form-field>\r\n\r\n  <ng-container #design>\r\n  </ng-container>\r\n  <mat-checkbox formControlName=\"required\">{{'Mandatory'|translate}}</mat-checkbox>\r\n  <mat-checkbox formControlName=\"autofill\">{{'Autofill'|translate}}</mat-checkbox>\r\n</form>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column}form{padding:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }, { type: SystemService }, { type: BizDocComponentFactoryResolver }, { type: PaneRef }]; }, propDecorators: { design: [{
                 type: ViewChild,
                 args: ['design', {
@@ -33871,7 +33962,7 @@ class SectionPropertiesComponent {
     save() { this._paneRef.close(this.form.value); }
 }
 SectionPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SectionPropertiesComponent, deps: [{ token: i1$3.FormBuilder }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component });
-SectionPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: SectionPropertiesComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form?.dirty || !form?.valid\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Title'|translate\" formControlName=\"title\"></bizdoc-localized-string>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Name'|translate}}</mat-label>\r\n    <input matInput required formControlName=\"name\" />\r\n    <mat-error *ngIf=\"form.get('name').hasError('pattern')\" [innerHTML]=\"'ProgramPatternErr'|translate\"></mat-error>\r\n    <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'Field'\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-localized-string [placeholder]=\"'Note'|translate\" formControlName=\"note\"></bizdoc-localized-string>\r\n\r\n</form>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+SectionPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: SectionPropertiesComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form?.dirty || !form?.valid\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Title'|translate\" formControlName=\"title\"></bizdoc-localized-string>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Name'|translate}}</mat-label>\r\n    <input matInput required formControlName=\"name\" />\r\n    <mat-error *ngIf=\"form.get('name').hasError('pattern')\" [innerHTML]=\"'ProgramPatternErr'|translate\"></mat-error>\r\n    <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'Field'\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-localized-string [placeholder]=\"'Note'|translate\" formControlName=\"note\"></bizdoc-localized-string>\r\n\r\n</form>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SectionPropertiesComponent, decorators: [{
             type: Component,
             args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form?.dirty || !form?.valid\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <bizdoc-localized-string [placeholder]=\"'Title'|translate\" formControlName=\"title\"></bizdoc-localized-string>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Name'|translate}}</mat-label>\r\n    <input matInput required formControlName=\"name\" />\r\n    <mat-error *ngIf=\"form.get('name').hasError('pattern')\" [innerHTML]=\"'ProgramPatternErr'|translate\"></mat-error>\r\n    <mat-error *ngIf=\"form.get('name').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'Field'\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-localized-string [placeholder]=\"'Note'|translate\" formControlName=\"note\"></bizdoc-localized-string>\r\n\r\n</form>\r\n", styles: ["form{padding:8px}\n"] }]
@@ -33986,7 +34077,6 @@ let FormDesignerComponent = class FormDesignerComponent {
             summary: null,
             sections: this.sections
         });
-        this._controls = {};
     }
     ngOnInit() {
         this._pane.queryParamsChange().subscribe(p => {
@@ -34060,7 +34150,7 @@ let FormDesignerComponent = class FormDesignerComponent {
         this._cd.detectChanges();
         (_a = this._el.nativeElement.querySelector(`section[data-index='${this.sections.controls.indexOf(section)}'] .designer-row:last-child button`)) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    iconOf(type) { return this._controls[type].icon; }
+    iconOf(type) { return this.controls[type].icon; }
     addField(section, row, control, evt) {
         let n = 0, name, label;
         do {
@@ -34071,6 +34161,7 @@ let FormDesignerComponent = class FormDesignerComponent {
             find(r => r.get('fields').controls.find(f => f.value.name === name || f.value.label === label) != null));
         this._router.navigate(ControlPropertiesComponent, {
             policy: OpenPolicy.Dialog | OpenPolicy.Dismissable,
+            icon: control.icon,
             state: {
                 name, label, draft: true,
                 controlType: control.name
@@ -34083,9 +34174,11 @@ let FormDesignerComponent = class FormDesignerComponent {
         }));
     }
     editField(field) {
+        const model = field.getRawValue(), control = this.controls[model.controlType];
         this._router.navigate(ControlPropertiesComponent, {
-            policy: OpenPolicy.Tab,
-            state: field.getRawValue()
+            policy: OpenPolicy.Tab | OpenPolicy.Defer,
+            icon: control.icon,
+            state: model
         }).then(e => e.closed().subscribe(v => {
             if (v) {
                 this._notifyChange();
@@ -34095,7 +34188,7 @@ let FormDesignerComponent = class FormDesignerComponent {
     }
     editSection(field) {
         this._router.navigate(SectionPropertiesComponent, {
-            policy: OpenPolicy.Tab,
+            policy: OpenPolicy.Tab | OpenPolicy.Defer,
             state: field.getRawValue()
         }).then(e => e.closed().subscribe(v => {
             if (v) {
@@ -34106,7 +34199,7 @@ let FormDesignerComponent = class FormDesignerComponent {
     }
     opensettings() {
         this._router.navigate(BoxSettingsComponent, {
-            policy: OpenPolicy.Tab,
+            policy: OpenPolicy.Tab | OpenPolicy.Defer,
             state: this.form.getRawValue()
         }).then(e => e.closed().subscribe(v => {
             this._notifyChange();
@@ -34188,13 +34281,13 @@ let FormDesignerComponent = class FormDesignerComponent {
     }
 };
 FormDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormDesignerComponent, deps: [{ token: i1$3.FormBuilder }, { token: PaneRef }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: SystemService }, { token: TranslateService }, { token: PanesRouter }, { token: SessionService }, { token: i0.ElementRef }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
-FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}.designer-field:hover{background-color:#f5f5f5}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignControlComponent, selector: "bizdoc-box-control-design", inputs: ["metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: FormDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"], dependencies: [{ kind: "directive", type: i1$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignControlComponent, selector: "bizdoc-box-control-design", inputs: ["metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FormDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-form-designer' })
 ], FormDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: FormDesignerComponent, decorators: [{
             type: Component,
-            args: [{ entryComponents: [SectionPropertiesComponent, ControlPropertiesComponent, BoxSettingsComponent], template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}.designer-field:hover{background-color:#f5f5f5}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
+            args: [{ entryComponents: [SectionPropertiesComponent, ControlPropertiesComponent, BoxSettingsComponent], template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }, { type: PaneRef }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: SystemService }, { type: TranslateService }, { type: PanesRouter }, { type: SessionService }, { type: i0.ElementRef }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -34708,7 +34801,7 @@ let ConfigurationDatasourceDesignComponent = class ConfigurationDatasourceDesign
     }
 };
 ConfigurationDatasourceDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ConfigurationDatasourceDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ConfigurationDatasourceDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ConfigurationDatasourceDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title row\">\r\n      {{'Items'|translate}}\r\n      <span class=divider></span>\r\n      <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n    </h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n          <bizdoc-localized-string [placeholder]=\"'Value'|translate\" formControlName=\"value\" required class=\"row\"></bizdoc-localized-string>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ConfigurationDatasourceDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ConfigurationDatasourceDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title row\">\r\n      {{'Items'|translate}}\r\n      <span class=divider></span>\r\n      <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add_circle_outline</mat-icon></button>\r\n    </h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n          <bizdoc-localized-string [placeholder]=\"'Value'|translate\" formControlName=\"value\" required class=\"row\"></bizdoc-localized-string>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ConfigurationDatasourceDesignComponent = __decorate([
     BizDoc({ selector: 'configuration-datasource-designer' })
 ], ConfigurationDatasourceDesignComponent);
@@ -35070,8 +35163,11 @@ class SystemModule {
                 Quarter: 'Quarter',
                 Calculate: 'Calculate',
                 Assignable: 'Assignable',
+                ChangeValue: 'change',
+                Key: 'Key',
             },
             he: {
+                Key: 'ערך',
                 Assignable: 'בר מינוי',
                 Month: 'חודשי',
                 Day: 'יומי',
@@ -35113,7 +35209,7 @@ class SystemModule {
                 Combination: 'מצרף',
                 Indexable: 'איבר במדד',
                 Aggregate: 'התעלם',
-                UnlockMultilang: 'תרגומים למשאב זה מוגדרים בקוד השרת. <a>אפשר/י</a> תרגום דרך כלי הניהול',
+                UnlockMultilang: 'תרגומים למשאב זה מוגדרים בקוד השרת. <a>אפשר/י</a> תרגום ידני',
                 DescendentOf: 'תת בחירה',
                 OneMode: 'יחיד',
                 Autocomplete: 'חיפוש',
@@ -35226,7 +35322,8 @@ class SystemModule {
                 CubeViews: 'מבטים',
                 CubeView: 'מבט',
                 Forms: 'טפסים',
-                Policies: 'אפציות'
+                ChangeValue: 'שנה',
+                Policies: 'מדיניות'
             }
         });
         return {