@bizdoc/core 1.17.1 → 1.17.2

package/fesm2020/bizdoc-core.mjs

@@ -1,22 +1,22 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, TemplateRef, Injector, ViewContainerRef, Component, ViewChild, Directive, Input, Pipe, Optional, Self, HostBinding, Output, EventEmitter, HostListener, ElementRef, NgModule, ViewChildren, Host, SkipSelf, ViewEncapsulation, APP_INITIALIZER, ContentChild } 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 * 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 * 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 { map, tap, filter, shareReplay, takeUntil as takeUntil$1, debounceTime, switchMap, take, first, catchError, startWith, finalize } from 'rxjs/operators';
 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 i1 from '@angular/common/http';
-import { HttpRequest, HttpResponse, HttpEventType, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 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 i1$3 from '@angular/forms';
-import { Validators, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 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';
@@ -112,7 +112,7 @@ import * as i4$5 from '@angular/material/list';
 import { MatListModule, MatSelectionList } from '@angular/material/list';
 import * as i8$3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4$6 from '@angular/material/radio';
+import * as i3$4 from '@angular/material/radio';
 import { MatRadioModule, MatRadioButton } from '@angular/material/radio';
 import * as i2$3 from '@angular/flex-layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -139,7 +139,7 @@ import * as i6$2 from '@syncfusion/ej2-angular-schedule';
 import { Schedule, Day, WorkWeek, Month, MonthAgenda, Agenda, Year, ScheduleModule, ExcelExportService as ExcelExportService$2, DayService, WorkWeekService, MonthService, MonthAgendaService, ICalendarExportService, AgendaService, YearService } from '@syncfusion/ej2-angular-schedule';
 import * as i10$3 from '@syncfusion/ej2-angular-kanban';
 import { KanbanComponent, KanbanModule } from '@syncfusion/ej2-angular-kanban';
-import * as i3$4 from '@syncfusion/ej2-angular-inputs';
+import * as i3$5 from '@syncfusion/ej2-angular-inputs';
 import { SignatureModule } from '@syncfusion/ej2-angular-inputs';
 import { CircularGaugeModule, AnnotationsService, GaugeTooltipService, LegendService as LegendService$1, CircularGauge, Annotations, GaugeTooltip, CircularGaugeComponent, Legend as Legend$1 } from '@syncfusion/ej2-angular-circulargauge';
 import { PivotViewModule, ExcelExportService as ExcelExportService$1, GroupingBarService, NumberFormattingService, GroupingService, PivotChartService, ConditionalFormattingService, PivotView as PivotView$1, GroupingBar, ExcelExport as ExcelExport$1, PivotChart, PivotViewComponent } from '@syncfusion/ej2-angular-pivotview';
@@ -198,70 +198,6 @@ function BizDoc(args) {
 //  return map;
 //}
 
-const BIZDOC_CONFIG = new InjectionToken('bizdoc');
-var OpenPolicy;
-(function (OpenPolicy) {
-    OpenPolicy[OpenPolicy["Pane"] = 1] = "Pane";
-    OpenPolicy[OpenPolicy["Clear"] = 2] = "Clear";
-    OpenPolicy[OpenPolicy["Defer"] = 4] = "Defer";
-    OpenPolicy[OpenPolicy["Pinnable"] = 8] = "Pinnable";
-    OpenPolicy[OpenPolicy["Stretch"] = 16] = "Stretch";
-    OpenPolicy[OpenPolicy["Expandable"] = 32] = "Expandable";
-    OpenPolicy[OpenPolicy["Toggle"] = 64] = "Toggle";
-    OpenPolicy[OpenPolicy["Tab"] = 128] = "Tab";
-    OpenPolicy[OpenPolicy["Dismissable"] = 256] = "Dismissable";
-    OpenPolicy[OpenPolicy["Dialog"] = 672] = "Dialog";
-})(OpenPolicy || (OpenPolicy = {}));
-const DEFAULT_POLICY = OpenPolicy.Pane;
-
-const DEVICE_TYPE = 'Chrome', ACTIVATION_DELAY = 3000;
-var FirebaseState;
-(function (FirebaseState) {
-    FirebaseState[FirebaseState["Activated"] = 0] = "Activated";
-})(FirebaseState || (FirebaseState = {}));
-class FirebaseService {
-    constructor(_config, _session) {
-        this._config = _config;
-        this._session = _session;
-        if (_config && navigator.serviceWorker) {
-            const { apiKey, projectId, senderId, appId } = _config;
-            if (apiKey) {
-                const app = firebase.initializeApp({
-                    apiKey,
-                    projectId,
-                    appId,
-                    messagingSenderId: senderId
-                });
-                this._messaging = getMessaging();
-            }
-        }
-    }
-    get state() {
-        return this._state;
-    }
-    activate() {
-        this._config && this._config.apiKey &&
-            setTimeout(() => this._activate(), this._config.grace || ACTIVATION_DELAY);
-    }
-    async close() {
-        await deleteToken(this._messaging);
-        return this._session.unregisterDevice(DEVICE_TYPE, this._token).subscribe();
-    }
-    _activate() {
-        const { vapidKey } = this._config;
-        navigator.serviceWorker.register('./js/firebase-messaging-sw.js')
-            .then((serviceWorkerRegistration) => {
-            //requestPermission();
-            getToken(this._messaging, { vapidKey, serviceWorkerRegistration }).
-                then(token => {
-                this._token = token;
-                this._session.registerDevice(DEVICE_TYPE, token).subscribe(() => this._state = FirebaseState.Activated);
-            });
-            //onTokenRefresh(token => this._session.registerDevice(DEVICE_TYPE, token).subscribe());
-        });
-    }
-}
-
 const FONT_FAMILY = 'Roboto, monospace, sans-serif';
 //// colors from https://github.com/egoist/color-lib/blob/master/color.json
 const MATERIAL_PALETTES = {
@@ -584,6 +520,358 @@ const MATERIAL_PALETTES = {
     //}
 };
 
+const IMAGE_TYPE = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
+function mapToArray(map) {
+    return Object.keys(map).map(k => ({ key: k, value: map[k] }));
+}
+function isImage(contentType) {
+    return IMAGE_TYPE.indexOf(contentType) > -1;
+}
+function cleanup(params) {
+    Object.keys(params).forEach(k => {
+        const val = params[k];
+        if (val === null || val === undefined)
+            delete params[k];
+        else if (typeof val === 'string' || val instanceof Date || typeof val === 'boolean')
+            return;
+        else if (Array.isArray(val)) {
+            if (val.length === 0)
+                delete params[k];
+            else
+                for (let i = 0; i < val.length; i++)
+                    isObject(val[i]) && cleanup(val[i]);
+        }
+        else if (isObject(val)) {
+            cleanup(val);
+            if (Object.keys(val).length === 0)
+                delete params[k];
+        }
+    });
+    return params;
+}
+function outOfBound(element) {
+    const bounding = element.getBoundingClientRect();
+    return bounding.top < 0 ||
+        bounding.left < 0 ||
+        bounding.right > document.documentElement.clientWidth ||
+        bounding.bottom > document.documentElement.clientHeight;
+}
+const IS_MOBILE = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+function isMobile() {
+    return IS_MOBILE /*|| document.cookie.indexOf('aria=1') > -1*/;
+}
+function isFunction(val) {
+    return typeof val === 'function';
+}
+function isBoolean(val) {
+    return typeof val === 'boolean';
+}
+function isObject(val) {
+    return val !== null && typeof val === 'object';
+}
+function isPrimitive(val) {
+    return typeof val !== 'object' && !Array.isArray(val);
+}
+function isPromise(obj) {
+    return obj instanceof Promise;
+}
+function isDate(val) {
+    return val instanceof Date;
+}
+function isArray(val) {
+    return Array.isArray(val);
+}
+function isString(val) {
+    return typeof val === 'string' || val instanceof String;
+}
+function getWarn(mode = 500) {
+    return MATERIAL_PALETTES['red'][mode];
+}
+function playAudio(name) {
+    try {
+        const audio = new Audio();
+        audio.src = `/assets/sounds/${name}.ogg`;
+        audio.load();
+        audio.play();
+    }
+    catch (e) {
+        console.log(e);
+    }
+}
+/**
+ *
+ * @param o1
+ * @param o2
+ */
+function deepAssign(o1, o2) {
+    o2 && Object.keys(o2).forEach(p => {
+        const val2 = o2[p], val1 = o1[p];
+        if (val1 === undefined || val1 === null || isPrimitive(val2)) // val !== 'object' && !Array.isArray(val)
+            o1[p] = val2;
+        else if (Array.isArray(val2)) {
+            if (val2.length && !isPrimitive(val2[0])) {
+                for (let i = 0; i < val2.length; i++) {
+                    if (val1[i] !== undefined)
+                        deepAssign(val1[i], val2[i]);
+                    else
+                        val1.push(val2[i]);
+                }
+                val1.splice(val2.length);
+            }
+            else
+                //(val2 as any[]).splice(0, val2.length, ...val);
+                o1[p] = val2;
+        }
+        else //if (isObject(val2))
+            deepAssign(val1, val2);
+    });
+    return o1;
+}
+function generateEncryptionMap() {
+    const values = {};
+    for (let i = 65; i < 91; i++) {
+        const d = (i - 65).toString(), c = String.fromCharCode(i);
+        values[d] = c;
+        values[c] = d;
+    }
+    for (let i = 97; i < 123; i++) {
+        const d = (i - 71).toString(), c = String.fromCharCode(i);
+        values[d] = c;
+        values[c] = d;
+    }
+    return values;
+}
+const decode = generateEncryptionMap();
+String.prototype.decodeId = function () {
+    let v = '';
+    for (let i = 0; i < this.length; i++) {
+        const c = this.charAt(i);
+        v += decode[c];
+    }
+    return parseInt(v);
+};
+Number.prototype.encodeId = function () {
+    let v = '', d = this.toString();
+    while (d.length > 0) {
+        let i = 51, c = i.toString();
+        while (!d.startsWith(c)) {
+            --i, c = i.toString();
+        }
+        v += decode[c];
+        d = d.substring(c.length);
+    }
+    return v;
+};
+/** global extended array functions */
+window.global = window;
+String.prototype.normalize = function () {
+    return this.replace(/ /g, '_').replace(/[^\w]/g, '').toLowerCase();
+};
+String.prototype.formatArgs = function (...args) {
+    return this.replace(/{(\d+)}/g, (_, index) => args[index] || '');
+};
+Array.prototype.last = function () {
+    return this[this.length - 1];
+};
+/** remove element from array */
+Array.prototype.remove = function (value) {
+    const index = this.indexOf(value);
+    if (index > -1)
+        this.splice(index, 1);
+    return this;
+};
+/** calculate average using element predicate */
+Array.prototype.average = function (predicate) {
+    let average = 0;
+    this.forEach(i => average += predicate(i));
+    return average !== 0 ? average / this.length : 0;
+};
+Array.prototype.distinct = function (predicate) {
+    const values = new Set();
+    this.forEach(i => values.add(predicate(i)));
+    return values;
+};
+Array.prototype.max = function (predicate) {
+    let n = 0;
+    this.forEach(i => n = Math.max(n, predicate(i)));
+    return n;
+};
+/** sum elements using predicate */
+Array.prototype.sum = function (predicate) {
+    let n = 0;
+    this.forEach(i => n += predicate(i));
+    return n;
+};
+/**
+ *
+ * @param args
+ */
+function queryParams(args) {
+    const params = {};
+    args &&
+        Object.keys(args).forEach(k => {
+            const val = args[k];
+            if (val !== null && val !== undefined) {
+                if (isString(val))
+                    params[k] = val;
+                else if (isArray(val) && val.length)
+                    params[k] = val;
+                else if (isDate(val))
+                    params[k] = val.toJSON();
+                else if (isObject(val)) {
+                    if (Object.keys(val).length)
+                        params[k] = queryParams(val);
+                }
+                else
+                    params[k] = val;
+            }
+        });
+    return params;
+}
+function getParameterByName(name, url = window.location.href) {
+    name = name.replace(/[\[\]]/g, '\\$&');
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
+    if (!results)
+        return null;
+    if (!results[2])
+        return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}
+
+/** */
+class DatasourceService {
+    constructor(_http) {
+        this._http = _http;
+        this._cache = {};
+    }
+    keys(type) {
+        return this.map(type).pipe(map(m => Object.keys(m)));
+    }
+    /**
+     *
+     * @param type
+     * @param key
+     */
+    get(type, key) {
+        return this.map(type).pipe(map(m => m[key] || key));
+    }
+    /**
+     *
+     * @param type
+     * @param value
+     */
+    keyOf(type, value) {
+        return this.map(type).pipe(map(m => Object.keys(m).find(k => m[k] === value)));
+    }
+    /**
+     *
+     * @param type
+     * @param params
+     */
+    map(type, queryParams) {
+        let cacheId = type;
+        if (queryParams) {
+            if (isObject(queryParams))
+                Object.keys(queryParams).forEach(k => cacheId += `${k}${queryParams[k]}`);
+            else
+                cacheId += queryParams.toString();
+        }
+        let observe = this._cache[cacheId];
+        if (!observe) {
+            const params = {};
+            if (queryParams) {
+                if (isObject(queryParams))
+                    Object.assign(params, queryParams);
+                else
+                    params.value = queryParams;
+            }
+            const dataSource = this._http.get(`/api/datatype/${encodeURIComponent(type)}`, {
+                params
+            });
+            observe = this._cache[cacheId] = dataSource.pipe(shareReplay());
+        }
+        return observe;
+    }
+    /**
+     *
+     * @param type
+     * @param params
+     */
+    all(type, queryParams) {
+        return this.map(type, queryParams).pipe(map(mapToArray));
+    }
+}
+DatasourceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DatasourceService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+DatasourceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DatasourceService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DatasourceService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
+const BIZDOC_CONFIG = new InjectionToken('bizdoc');
+var OpenPolicy;
+(function (OpenPolicy) {
+    OpenPolicy[OpenPolicy["Pane"] = 1] = "Pane";
+    OpenPolicy[OpenPolicy["Clear"] = 2] = "Clear";
+    OpenPolicy[OpenPolicy["Defer"] = 4] = "Defer";
+    OpenPolicy[OpenPolicy["Pinnable"] = 8] = "Pinnable";
+    OpenPolicy[OpenPolicy["Stretch"] = 16] = "Stretch";
+    OpenPolicy[OpenPolicy["Expandable"] = 32] = "Expandable";
+    OpenPolicy[OpenPolicy["Toggle"] = 64] = "Toggle";
+    OpenPolicy[OpenPolicy["Tab"] = 128] = "Tab";
+    OpenPolicy[OpenPolicy["Dismissable"] = 256] = "Dismissable";
+    OpenPolicy[OpenPolicy["Dialog"] = 672] = "Dialog";
+})(OpenPolicy || (OpenPolicy = {}));
+const DEFAULT_POLICY = OpenPolicy.Pane;
+
+const DEVICE_TYPE = 'Chrome', ACTIVATION_DELAY = 3000;
+var FirebaseState;
+(function (FirebaseState) {
+    FirebaseState[FirebaseState["Activated"] = 0] = "Activated";
+})(FirebaseState || (FirebaseState = {}));
+class FirebaseService {
+    constructor(_config, _session) {
+        this._config = _config;
+        this._session = _session;
+        if (_config && navigator.serviceWorker) {
+            const { apiKey, projectId, senderId, appId } = _config;
+            if (apiKey) {
+                const app = firebase.initializeApp({
+                    apiKey,
+                    projectId,
+                    appId,
+                    messagingSenderId: senderId
+                });
+                this._messaging = getMessaging();
+            }
+        }
+    }
+    get state() {
+        return this._state;
+    }
+    activate() {
+        this._config && this._config.apiKey &&
+            setTimeout(() => this._activate(), this._config.grace || ACTIVATION_DELAY);
+    }
+    async close() {
+        await deleteToken(this._messaging);
+        return this._session.unregisterDevice(DEVICE_TYPE, this._token).subscribe();
+    }
+    _activate() {
+        const { vapidKey } = this._config;
+        navigator.serviceWorker.register('./js/firebase-messaging-sw.js')
+            .then((serviceWorkerRegistration) => {
+            //requestPermission();
+            getToken(this._messaging, { vapidKey, serviceWorkerRegistration }).
+                then(token => {
+                this._token = token;
+                this._session.registerDevice(DEVICE_TYPE, token).subscribe(() => this._state = FirebaseState.Activated);
+            });
+            //onTokenRefresh(token => this._session.registerDevice(DEVICE_TYPE, token).subscribe());
+        });
+    }
+}
+
 class AuthenticationImpl {
 }
 
@@ -940,223 +1228,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
                     args: [BIZDOC_CONFIG]
                 }] }, { type: i1.HttpClient }, { type: i2.CookieService }, { type: HubService }, { type: i10.MatIconRegistry }, { type: i1$1.DomSanitizer }]; } });
 
-const IMAGE_TYPE = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
-function mapToArray(map) {
-    return Object.keys(map).map(k => ({ key: k, value: map[k] }));
-}
-function isImage(contentType) {
-    return IMAGE_TYPE.indexOf(contentType) > -1;
-}
-function cleanup(params) {
-    Object.keys(params).forEach(k => {
-        const val = params[k];
-        if (val === null || val === undefined)
-            delete params[k];
-        else if (typeof val === 'string' || val instanceof Date || typeof val === 'boolean')
-            return;
-        else if (Array.isArray(val)) {
-            if (val.length === 0)
-                delete params[k];
-            else
-                for (let i = 0; i < val.length; i++)
-                    isObject(val[i]) && cleanup(val[i]);
-        }
-        else if (isObject(val)) {
-            cleanup(val);
-            if (Object.keys(val).length === 0)
-                delete params[k];
-        }
-    });
-    return params;
-}
-function outOfBound(element) {
-    const bounding = element.getBoundingClientRect();
-    return bounding.top < 0 ||
-        bounding.left < 0 ||
-        bounding.right > document.documentElement.clientWidth ||
-        bounding.bottom > document.documentElement.clientHeight;
-}
-const IS_MOBILE = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-function isMobile() {
-    return IS_MOBILE /*|| document.cookie.indexOf('aria=1') > -1*/;
-}
-function isFunction(val) {
-    return typeof val === 'function';
-}
-function isBoolean(val) {
-    return typeof val === 'boolean';
-}
-function isObject(val) {
-    return val !== null && typeof val === 'object';
-}
-function isPrimitive(val) {
-    return typeof val !== 'object' && !Array.isArray(val);
-}
-function isPromise(obj) {
-    return obj instanceof Promise;
-}
-function isDate(val) {
-    return val instanceof Date;
-}
-function isArray(val) {
-    return Array.isArray(val);
-}
-function isString(val) {
-    return typeof val === 'string' || val instanceof String;
-}
-function getWarn(mode = 500) {
-    return MATERIAL_PALETTES['red'][mode];
-}
-function playAudio(name) {
-    try {
-        const audio = new Audio();
-        audio.src = `/assets/sounds/${name}.ogg`;
-        audio.load();
-        audio.play();
-    }
-    catch (e) {
-        console.log(e);
+class OptionsControlField {
+    constructor(_ds) {
+        this._ds = _ds;
     }
-}
-/**
- *
- * @param o1
- * @param o2
- */
-function deepAssign(o1, o2) {
-    o2 && Object.keys(o2).forEach(p => {
-        const val2 = o2[p], val1 = o1[p];
-        if (val1 === undefined || val1 === null || isPrimitive(val2)) // val !== 'object' && !Array.isArray(val)
-            o1[p] = val2;
-        else if (Array.isArray(val2)) {
-            if (val2.length && !isPrimitive(val2[0])) {
-                for (let i = 0; i < val2.length; i++) {
-                    if (val1[i] !== undefined)
-                        deepAssign(val1[i], val2[i]);
-                    else
-                        val1.push(val2[i]);
-                }
-                val1.splice(val2.length);
-            }
-            else
-                //(val2 as any[]).splice(0, val2.length, ...val);
-                o1[p] = val2;
-        }
-        else //if (isObject(val2))
-            deepAssign(val1, val2);
-    });
-    return o1;
-}
-function generateEncryptionMap() {
-    const values = {};
-    for (let i = 65; i < 91; i++) {
-        const d = (i - 65).toString(), c = String.fromCharCode(i);
-        values[d] = c;
-        values[c] = d;
+    ngOnInit() {
+        this.required && this.control.addValidators(Validators.required);
+        if (this.dataType)
+            this._ds.all(this.dataType).subscribe(v => this.options = v);
     }
-    for (let i = 97; i < 123; i++) {
-        const d = (i - 71).toString(), c = String.fromCharCode(i);
-        values[d] = c;
-        values[c] = d;
+    optionOf(value) {
+        return this.options?.find(o => o.key === value)?.value;
     }
-    return values;
 }
-const decode = generateEncryptionMap();
-String.prototype.decodeId = function () {
-    let v = '';
-    for (let i = 0; i < this.length; i++) {
-        const c = this.charAt(i);
-        v += decode[c];
-    }
-    return parseInt(v);
-};
-Number.prototype.encodeId = function () {
-    let v = '', d = this.toString();
-    while (d.length > 0) {
-        let i = 51, c = i.toString();
-        while (!d.startsWith(c)) {
-            --i, c = i.toString();
-        }
-        v += decode[c];
-        d = d.substring(c.length);
+OptionsControlField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: OptionsControlField, deps: [{ token: DatasourceService }], target: i0.ɵɵFactoryTarget.Directive });
+OptionsControlField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.5", type: OptionsControlField, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: OptionsControlField, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: DatasourceService }]; } });
+class OptionsControlDesigner {
+    constructor(_session) {
+        this._session = _session;
+        this._typeRequired = (control) => {
+            const options = control.parent?.get('options');
+            if (options && !options.length)
+                return { required: true };
+            return null;
+        };
+        this.datatypes = this._session.profile.types;
     }
-    return v;
-};
-/** global extended array functions */
-window.global = window;
-String.prototype.normalize = function () {
-    return this.replace(/ /g, '_').replace(/[^\w]/g, '').toLowerCase();
-};
-String.prototype.formatArgs = function (...args) {
-    return this.replace(/{(\d+)}/g, (_, index) => args[index] || '');
-};
-Array.prototype.last = function () {
-    return this[this.length - 1];
-};
-/** remove element from array */
-Array.prototype.remove = function (value) {
-    const index = this.indexOf(value);
-    if (index > -1)
-        this.splice(index, 1);
-    return this;
-};
-/** calculate average using element predicate */
-Array.prototype.average = function (predicate) {
-    let average = 0;
-    this.forEach(i => average += predicate(i));
-    return average !== 0 ? average / this.length : 0;
-};
-Array.prototype.distinct = function (predicate) {
-    const values = new Set();
-    this.forEach(i => values.add(predicate(i)));
-    return values;
-};
-Array.prototype.max = function (predicate) {
-    let n = 0;
-    this.forEach(i => n = Math.max(n, predicate(i)));
-    return n;
-};
-/** sum elements using predicate */
-Array.prototype.sum = function (predicate) {
-    let n = 0;
-    this.forEach(i => n += predicate(i));
-    return n;
-};
-/**
- *
- * @param args
- */
-function queryParams(args) {
-    const params = {};
-    args &&
-        Object.keys(args).forEach(k => {
-            const val = args[k];
-            if (val !== null && val !== undefined) {
-                if (isString(val))
-                    params[k] = val;
-                else if (isArray(val) && val.length)
-                    params[k] = val;
-                else if (isDate(val))
-                    params[k] = val.toJSON();
-                else if (isObject(val)) {
-                    if (Object.keys(val).length)
-                        params[k] = queryParams(val);
-                }
-                else
-                    params[k] = val;
-            }
-        });
-    return params;
 }
-function getParameterByName(name, url = window.location.href) {
-    name = name.replace(/[\[\]]/g, '\\$&');
-    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
-    if (!results)
-        return null;
-    if (!results[2])
-        return '';
-    return decodeURIComponent(results[2].replace(/\+/g, ' '));
-}
+OptionsControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: OptionsControlDesigner, deps: [{ token: SessionService }], target: i0.ɵɵFactoryTarget.Directive });
+OptionsControlDesigner.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.5", type: OptionsControlDesigner, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: OptionsControlDesigner, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: SessionService }]; } });
 
 class PopupRef {
     constructor(_data) {
@@ -2858,47 +2964,46 @@ class ControlOptionsComponent {
     }
 }
 ControlOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", 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.5", 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    <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: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "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.5", 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: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "value", "placeholder", "required", "disabled", "maxlength"], outputs: ["valueChanges"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", 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    <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\">\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" }]
         }], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$3.FormBuilder }]; }, propDecorators: { form: [{
                 type: Input
             }], model: [{
                 type: Input
             }] } });
 
-let SelectControlDesigner = class SelectControlDesigner {
-    constructor(_session, _fb) {
-        this._session = _session;
+let SelectControlDesigner = class SelectControlDesigner extends OptionsControlDesigner {
+    constructor(session, _fb) {
+        super(session);
         this._fb = _fb;
         this.form = this._fb.group({
             label: null,
             placeholder: null,
             autocomplete: null,
             multiple: null,
-            dataType: null,
+            dataType: this._fb.control(null, this._typeRequired),
         });
-        this.datatypes = this._session.profile.types;
     }
     onBind(model) {
         this.model = model;
     }
 };
 SelectControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SelectControlDesigner, deps: [{ token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-SelectControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: SelectControlDesigner, selector: "ng-component", ngImport: i0, template: `
+SelectControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", 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-label>{{'DataType'|translate}}</mat-label>
-      <mat-select formControlName="dataType" required>
+      <mat-select formControlName="dataType">
         <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title}}</mat-option>
       </mat-select>
-      <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:'DataType'"></mat-error>
+      <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.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$2.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: 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: "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$2.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: TranslatePipe, name: "translate" }] });
 SelectControlDesigner = __decorate([
     BizDoc({ selector: 'select-control-designer' })
 ], SelectControlDesigner);
@@ -2910,10 +3015,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
       <bizdoc-localized-string [placeholder]="'Label'|translate" formControlName="label"></bizdoc-localized-string>
     <mat-form-field>
       <mat-label>{{'DataType'|translate}}</mat-label>
-      <mat-select formControlName="dataType" required>
+      <mat-select formControlName="dataType">
         <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title}}</mat-option>
       </mat-select>
-      <mat-error *ngIf="form.get('dataType').hasError('required')" [innerHTML]="'RequiredErr'|translate:'DataType'"></mat-error>
+      <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>
@@ -3279,26 +3384,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: i1$3.FormBuilder }]; } });
 
-let ChecklistControlDesigner = class ChecklistControlDesigner {
-    constructor(_session, _fb) {
-        this._session = _session;
+let ChecklistControlDesigner = class ChecklistControlDesigner extends OptionsControlDesigner {
+    constructor(session, _fb) {
+        super(session);
         this._fb = _fb;
         this.form = this._fb.group({
             label: null,
-            multiple: null,
-            dataType: null,
+            multiple: true,
+            dataType: this._fb.control(null, this._typeRequired),
             hint: null,
         });
-        this.datatypes = this._session.profile.types;
-    }
-    ngOnInit() {
     }
     onBind(model) {
         this.model = model;
     }
 };
 ChecklistControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ChecklistControlDesigner, deps: [{ token: SessionService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ChecklistControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: ChecklistControlDesigner, selector: "ng-component", ngImport: i0, template: `
+ChecklistControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", 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>
@@ -3306,9 +3408,10 @@ ChecklistControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
       <mat-select formControlName="dataType">
         <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title}}</mat-option>
       </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$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: "component", type: i9$2.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: "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$2.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" }] });
 ChecklistControlDesigner = __decorate([
     BizDoc({ selector: 'checklist-control-designer' })
 ], ChecklistControlDesigner);
@@ -3323,34 +3426,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
       <mat-select formControlName="dataType">
         <mat-option *ngFor="let t of datatypes" [value]="t.name">{{t.title}}</mat-option>
       </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 }]; } });
 
-let RadioButtonControlDesigner = class RadioButtonControlDesigner {
-    constructor(_session, _fb) {
-        this._session = _session;
+let RadioButtonControlDesigner = class RadioButtonControlDesigner extends OptionsControlDesigner {
+    constructor(session, _fb) {
+        super(session);
         this._fb = _fb;
         this.form = this._fb.group({
             label: null,
-            dataType: null,
+            dataType: this._fb.control(null, this._typeRequired),
+            hint: null,
         });
-        this.datatypes = this._session.profile.types;
     }
     onBind(model) {
         this.model = model;
     }
 };
 RadioButtonControlDesigner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", 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.5", type: RadioButtonControlDesigner, selector: "ng-component", ngImport: i0, template: "<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\">\r\n      <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get('dataType').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'DataType'\"></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: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+RadioButtonControlDesigner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: RadioButtonControlDesigner, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<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\">\r\n      <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</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: ControlOptionsComponent, selector: "bizdoc-design-options", inputs: ["form", "model"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 RadioButtonControlDesigner = __decorate([
     BizDoc({ selector: 'radio-button-control-designer' })
 ], RadioButtonControlDesigner);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: RadioButtonControlDesigner, decorators: [{
             type: Component,
-            args: [{ template: "<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\">\r\n      <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get('dataType').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:'DataType'\"></mat-error>\r\n  </mat-form-field>\r\n  <bizdoc-design-options [form]=\"form\" [model]=\"model\"></bizdoc-design-options>\r\n</form>\r\n" }]
+            args: [{ template: "<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\">\r\n      <mat-option *ngFor=\"let t of datatypes\" [value]=\"t.name\">{{t.title}}</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 }]; } });
 
 let AddressControlDesigner = class AddressControlDesigner {
@@ -3410,76 +3514,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; } });
 
-/** */
-class DatasourceService {
-    constructor(_http) {
-        this._http = _http;
-        this._cache = {};
-    }
-    keys(type) {
-        return this.map(type).pipe(map(m => Object.keys(m)));
-    }
-    /**
-     *
-     * @param type
-     * @param key
-     */
-    get(type, key) {
-        return this.map(type).pipe(map(m => m[key] || key));
-    }
-    /**
-     *
-     * @param type
-     * @param value
-     */
-    keyOf(type, value) {
-        return this.map(type).pipe(map(m => Object.keys(m).find(k => m[k] === value)));
-    }
-    /**
-     *
-     * @param type
-     * @param params
-     */
-    map(type, queryParams) {
-        let cacheId = type;
-        if (queryParams) {
-            if (isObject(queryParams))
-                Object.keys(queryParams).forEach(k => cacheId += `${k}${queryParams[k]}`);
-            else
-                cacheId += queryParams.toString();
-        }
-        let observe = this._cache[cacheId];
-        if (!observe) {
-            const params = {};
-            if (queryParams) {
-                if (isObject(queryParams))
-                    Object.assign(params, queryParams);
-                else
-                    params.value = queryParams;
-            }
-            const dataSource = this._http.get(`/api/datatype/${encodeURIComponent(type)}`, {
-                params
-            });
-            observe = this._cache[cacheId] = dataSource.pipe(shareReplay());
-        }
-        return observe;
-    }
-    /**
-     *
-     * @param type
-     * @param params
-     */
-    all(type, queryParams) {
-        return this.map(type, queryParams).pipe(map(mapToArray));
-    }
-}
-DatasourceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DatasourceService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-DatasourceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DatasourceService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DatasourceService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-
 class TypeAutocomplete {
     constructor(ngControl, _fm, _elRef, _session, _service) {
         this.ngControl = ngControl;
@@ -4664,16 +4698,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
                 type: Input
             }] } });
 
-let SelectField = class SelectField {
-    constructor(_ds) {
-        this._ds = _ds;
+let SelectField = class SelectField extends OptionsControlField {
+    constructor() {
+        super(...arguments);
         this.control = new FormControl();
     }
-    ngOnInit() {
-        this.dataType &&
-            this._ds.all(this.dataType, this.params).subscribe(v => this.options = v);
-        this.required && this.control.addValidators(Validators.required);
-    }
     focus() {
         if (this.input)
             this.input.focus();
@@ -4681,15 +4710,15 @@ let SelectField = class SelectField {
             this.select.focus();
     }
 };
-SelectField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SelectField, deps: [{ token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component });
-SelectField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: SelectField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: TypeSelect, descendants: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: "<mat-form-field [appearance]=appearance *ngIf=\"mode==='compose';else view\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n              [required]=\"required\" [multiple]=\"multiple\">\r\n    <mat-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value}}</mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</mat-form-field>\r\n<ng-template #view>\r\n  <span>{{control.value | typeValue: dataType | async}}</span>\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.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: 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: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TypeValuePipe, name: "typeValue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+SelectField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SelectField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: SelectField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: TypeSelect, descendants: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=appearance *ngIf=\"mode==='compose';else view\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n              [required]=\"required\" [multiple]=\"multiple\">\r\n    <mat-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value}}</mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</mat-form-field>\r\n<ng-template #view>\r\n  <span *ngIf=\"control.value\" [ngSwitch]=\"multiple\">\r\n    <ng-container *ngSwitchCase=\"true\">\r\n      <ng-container *ngFor=\"let o of control.value; index as index\">\r\n        {{optionOf(o)|localizedString}}\r\n        <ng-container *ngIf=\"index>0\">,&nbsp;</ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      {{optionOf(control.value)|localizedString}}\r\n    </ng-container>\r\n  </span>\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$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.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: 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: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 SelectField = __decorate([
     BizDoc({ selector: 'select-control' })
 ], SelectField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SelectField, decorators: [{
             type: Component,
-            args: [{ host: { class: 'field' }, template: "<mat-form-field [appearance]=appearance *ngIf=\"mode==='compose';else view\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n              [required]=\"required\" [multiple]=\"multiple\">\r\n    <mat-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value}}</mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</mat-form-field>\r\n<ng-template #view>\r\n  <span>{{control.value | typeValue: dataType | async}}</span>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: DatasourceService }]; }, propDecorators: { input: [{
+            args: [{ host: { class: 'field' }, template: "<mat-form-field [appearance]=appearance *ngIf=\"mode==='compose';else view\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n              [required]=\"required\" [multiple]=\"multiple\">\r\n    <mat-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value}}</mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</mat-form-field>\r\n<ng-template #view>\r\n  <span *ngIf=\"control.value\" [ngSwitch]=\"multiple\">\r\n    <ng-container *ngSwitchCase=\"true\">\r\n      <ng-container *ngFor=\"let o of control.value; index as index\">\r\n        {{optionOf(o)|localizedString}}\r\n        <ng-container *ngIf=\"index>0\">,&nbsp;</ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      {{optionOf(control.value)|localizedString}}\r\n    </ng-container>\r\n  </span>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [TypeSelect]
             }], select: [{
@@ -13909,11 +13938,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
 
 /** */
 class ReportRef {
-    constructor(_configuration, _hub, dim) {
+    constructor(_configuration, args, _hub, dim) {
         this._configuration = _configuration;
         this._hub = _hub;
         this._exporting = new Subject();
         this._resize = new BehaviorSubject(dim);
+        this._args = new BehaviorSubject(args);
     }
     /** intercept user export */
     exporting() {
@@ -13931,6 +13961,7 @@ class ReportRef {
     }
     /** configuration name */
     get name() { return this._configuration.name; }
+    get arguments() { return this._args.value; }
     _destroy() {
         this._resize.unsubscribe();
     }
@@ -13991,7 +14022,7 @@ class ReportViewerComponent {
         if (changes['report']) {
             this._destroy.next();
             this._reportRef && this._reportRef._destroy();
-            this._reportRef = new ReportRef(this.report, this._hub, this._dim());
+            this._reportRef = new ReportRef(this.report, this.args, this._hub, this._dim());
             if (this.report.template)
                 this._createView();
             else
@@ -14005,6 +14036,8 @@ class ReportViewerComponent {
             });
             this._resizing.pipe(debounceTime(150)).subscribe(() => this._reportRef._resize.next(this._dim()));
         }
+        if (changes['args'])
+            this._reportRef._args.next(this.args);
     }
     /** */
     _createView() {
@@ -22868,7 +22901,7 @@ let YesNoField = class YesNoField {
     }
 };
 YesNoField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: YesNoField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-YesNoField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: YesNoField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatRadioButton, descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode==='compose';else view\">\r\n<!--  <mat-label *ngIf=label>{{label|localizedString}}</mat-label>-->\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-radio-group [formControl]=control>\r\n    <mat-radio-button [value]=\"true\">{{'Yes'|translate}}</mat-radio-button>\r\n    <mat-radio-button [value]=\"false\">{{'No'|translate}}</mat-radio-button>\r\n  </mat-radio-group>\r\n\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  {{(control.value?'Yes':'No')|translate}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+YesNoField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: YesNoField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatRadioButton, descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode==='compose';else view\">\r\n<!--  <mat-label *ngIf=label>{{label|localizedString}}</mat-label>-->\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-radio-group [formControl]=control>\r\n    <mat-radio-button [value]=\"true\">{{'Yes'|translate}}</mat-radio-button>\r\n    <mat-radio-button [value]=\"false\">{{'No'|translate}}</mat-radio-button>\r\n  </mat-radio-group>\r\n\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  {{(control.value?'Yes':'No')|translate}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "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: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 YesNoField = __decorate([
     BizDoc({ selector: 'yesno-control' })
 ], YesNoField);
@@ -22880,59 +22913,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImpor
                 args: [MatRadioButton]
             }] } });
 
-let ChecklistField = class ChecklistField {
-    constructor(_ds) {
-        this._ds = _ds;
+let ChecklistField = class ChecklistField extends OptionsControlField {
+    constructor() {
+        super(...arguments);
         this.control = new FormControl();
     }
-    ngOnInit() {
-        this.required && this.control.addValidators(Validators.required);
-        if (this.dataType)
-            this._ds.all(this.dataType).subscribe(v => this.options = v);
-    }
     focus() { this.input.focus(); }
-    optionOf(value) {
-        this.options.find(o => o.key === value)?.value;
-    }
 };
-ChecklistField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ChecklistField, deps: [{ token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component });
-ChecklistField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: ChecklistField, selector: "ng-component", inputs: { params: "params" }, host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatSelectionList, descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode==='compose';else view\">\r\n  <mat-label *ngIf=\"label\">{{label |localizedString}}</mat-label>\r\n  <mat-selection-list [formControl]=\"control\" multiple>\r\n    <mat-list-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value|localizedString}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <ng-container *ngIf=\"control.value\">\r\n    <mat-tag *ngFor=\"let o of control.value\">{{optionOf(o)|localizedString}}</mat-tag>\r\n  </ng-container>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$5.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$5.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ChecklistField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ChecklistField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ChecklistField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: ChecklistField, selector: "ng-component", inputs: { params: "params" }, host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatSelectionList, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"mode==='compose';else view\">\r\n  <mat-label *ngIf=\"label\">{{label |localizedString}}</mat-label>\r\n  <mat-selection-list [formControl]=\"control\" multiple>\r\n    <mat-list-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value|localizedString}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <ng-container *ngIf=\"control.value\">\r\n    <ng-container *ngFor=\"let o of control.value; index as index\">\r\n      {{optionOf(o)|localizedString}}\r\n      <ng-container *ngIf=\"index>0\">,&nbsp;</ng-container>\r\n    </ng-container>\r\n  </ng-container>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$5.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$5.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ChecklistField = __decorate([
     BizDoc({ selector: 'checklist-control' })
 ], ChecklistField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ChecklistField, decorators: [{
             type: Component,
-            args: [{ host: { class: 'field' }, template: "<div *ngIf=\"mode==='compose';else view\">\r\n  <mat-label *ngIf=\"label\">{{label |localizedString}}</mat-label>\r\n  <mat-selection-list [formControl]=\"control\" multiple>\r\n    <mat-list-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value|localizedString}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <ng-container *ngIf=\"control.value\">\r\n    <mat-tag *ngFor=\"let o of control.value\">{{optionOf(o)|localizedString}}</mat-tag>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: DatasourceService }]; }, propDecorators: { params: [{
+            args: [{ host: { class: 'field' }, template: "<div *ngIf=\"mode==='compose';else view\">\r\n  <mat-label *ngIf=\"label\">{{label |localizedString}}</mat-label>\r\n  <mat-selection-list [formControl]=\"control\" multiple>\r\n    <mat-list-option *ngFor=\"let o of options\" [value]=\"o.key\">{{o.value|localizedString}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <ng-container *ngIf=\"control.value\">\r\n    <ng-container *ngFor=\"let o of control.value; index as index\">\r\n      {{optionOf(o)|localizedString}}\r\n      <ng-container *ngIf=\"index>0\">,&nbsp;</ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { params: [{
                 type: Input
             }], input: [{
                 type: ViewChild,
                 args: [MatSelectionList]
             }] } });
 
-let RadioButtonField = class RadioButtonField {
-    constructor(_ds) {
-        this._ds = _ds;
+let RadioButtonField = class RadioButtonField extends OptionsControlField {
+    constructor() {
+        super(...arguments);
         this.control = new FormControl(false);
     }
     focus() { this.input.focus(); }
-    ngOnInit() {
-        this.required && this.control.addValidators(Validators.required);
-        this.dataType && this._ds.all(this.dataType).subscribe(v => this.options = v);
-    }
-    optionOf(value) {
-        this.options.find(o => o.key === value)?.value;
-    }
 };
-RadioButtonField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: RadioButtonField, deps: [{ token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: RadioButtonField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatRadioButton, descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'compose'; else view\">\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <mat-radio-group [formControl]=control>\r\n    <mat-radio-button *ngFor=\"let o of options\" [value]=\"o.key\">\r\n      {{o.value|localizedString}}\r\n    </mat-radio-button>\r\n  </mat-radio-group>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label||name)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <span>\r\n    {{optionOf(control.value)|localizedString}}\r\n  </span>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+RadioButtonField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: RadioButtonField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioButtonField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: RadioButtonField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatRadioButton, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"mode === 'compose'; else view\">\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <mat-radio-group [formControl]=control>\r\n    <mat-radio-button *ngFor=\"let o of options\" [value]=\"o.key\">\r\n      {{o.value|localizedString}}\r\n    </mat-radio-button>\r\n  </mat-radio-group>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label||name)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <span *ngIf=\"control.value\">\r\n    {{optionOf(control.value)|localizedString}}\r\n  </span>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 RadioButtonField = __decorate([
     BizDoc({ selector: 'radio-button-control' })
 ], RadioButtonField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: RadioButtonField, decorators: [{
             type: Component,
-            args: [{ host: { class: 'field' }, template: "<div *ngIf=\"mode === 'compose'; else view\">\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <mat-radio-group [formControl]=control>\r\n    <mat-radio-button *ngFor=\"let o of options\" [value]=\"o.key\">\r\n      {{o.value|localizedString}}\r\n    </mat-radio-button>\r\n  </mat-radio-group>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label||name)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <span>\r\n    {{optionOf(control.value)|localizedString}}\r\n  </span>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: DatasourceService }]; }, propDecorators: { input: [{
+            args: [{ host: { class: 'field' }, template: "<div *ngIf=\"mode === 'compose'; else view\">\r\n  <mat-hint *ngIf=\"hint\"> {{ hint|localizedString }}</mat-hint>\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <mat-radio-group [formControl]=control>\r\n    <mat-radio-button *ngFor=\"let o of options\" [value]=\"o.key\">\r\n      {{o.value|localizedString}}\r\n    </mat-radio-button>\r\n  </mat-radio-group>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label||name)\"></mat-error>\r\n</div>\r\n<ng-template #view>\r\n  <span *ngIf=\"control.value\">\r\n    {{optionOf(control.value)|localizedString}}\r\n  </span>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatRadioButton]
             }] } });
@@ -22960,7 +22978,7 @@ let SignatureField = class SignatureField {
     }
 };
 SignatureField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SignatureField, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-SignatureField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: SignatureField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["signature"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode==='compose';else view\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <canvas ejs-signature #signature id=\"signature\" (created)=\"created()\" (change)=\"change($event)\"></canvas>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  <button mat-icon-button (click)=\"clear()\" [bizdocTooltip]=\"'Clear'|translate\" [disabled]=\"!control.value\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n<ng-template #view>\r\n  <img [src]=\"src\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.SignatureComponent, selector: "[ejs-signature]", inputs: ["backgroundColor", "backgroundImage", "disabled", "enablePersistence", "enableRtl", "isReadOnly", "locale", "maxStrokeWidth", "minStrokeWidth", "saveWithBackground", "strokeColor", "velocity"], outputs: ["focus", "blur", "beforeSave", "change", "created"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+SignatureField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: SignatureField, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["signature"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode==='compose';else view\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <canvas ejs-signature #signature id=\"signature\" (created)=\"created()\" (change)=\"change($event)\"></canvas>\r\n  <mat-hint *ngIf=\"hint\"> {{ hint |localizedString}}</mat-hint>\r\n  <mat-error *ngIf=\"control.hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  <button mat-icon-button (click)=\"clear()\" [bizdocTooltip]=\"'Clear'|translate\" [disabled]=\"!control.value\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n<ng-template #view>\r\n  <img [src]=\"src\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$5.SignatureComponent, selector: "[ejs-signature]", inputs: ["backgroundColor", "backgroundImage", "disabled", "enablePersistence", "enableRtl", "isReadOnly", "locale", "maxStrokeWidth", "minStrokeWidth", "saveWithBackground", "strokeColor", "velocity"], outputs: ["focus", "blur", "beforeSave", "change", "created"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 SignatureField = __decorate([
     BizDoc({ selector: 'signature-control' })
 ], SignatureField);
@@ -25571,7 +25589,7 @@ Signature.nextId = 0;
 Signature.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: Signature, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: i2$1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 Signature.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: Signature, selector: "bizdoc-signature", inputs: { width: "width", height: "height", velocity: "velocity", placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy", "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: Signature }], viewQueries: [{ propertyName: "_control", first: true, predicate: ["signature"], descendants: true }], ngImport: i0, template: `
 <canvas ejs-signature #signature (change)="_change($event)"></canvas>
-`, isInline: true, dependencies: [{ kind: "component", type: i3$4.SignatureComponent, selector: "[ejs-signature]", inputs: ["backgroundColor", "backgroundImage", "disabled", "enablePersistence", "enableRtl", "isReadOnly", "locale", "maxStrokeWidth", "minStrokeWidth", "saveWithBackground", "strokeColor", "velocity"], outputs: ["focus", "blur", "beforeSave", "change", "created"] }] });
+`, isInline: true, dependencies: [{ kind: "component", type: i3$5.SignatureComponent, selector: "[ejs-signature]", inputs: ["backgroundColor", "backgroundImage", "disabled", "enablePersistence", "enableRtl", "isReadOnly", "locale", "maxStrokeWidth", "minStrokeWidth", "saveWithBackground", "strokeColor", "velocity"], outputs: ["focus", "blur", "beforeSave", "change", "created"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: Signature, decorators: [{
             type: Component,
             args: [{
@@ -32475,7 +32493,8 @@ class ControlDesignComponent extends DesignerTypeElementComponent {
     constructor() {
         super(...arguments);
         this.form = this._fb.group({
-            dataType: this._fb.control(null, Validators.required)
+            dataType: this._fb.control(null, Validators.required),
+            visible: null
         });
     }
     ngOnInit() {
@@ -32484,10 +32503,10 @@ class ControlDesignComponent extends DesignerTypeElementComponent {
     }
 }
 ControlDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ControlDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ControlDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: ControlDesignComponent, 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    </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.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: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "state"], outputs: ["continue", "save"] }] });
+ControlDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: ControlDesignComponent, 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><mat-checkbox formControlName=\"visible\">{{'Visible'}}</mat-checkbox></div>\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.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$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "state"], outputs: ["continue", "save"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ControlDesignComponent, 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    </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      <div><mat-checkbox formControlName=\"visible\">{{'Visible'}}</mat-checkbox></div>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
 /** filter component*/
@@ -32751,7 +32770,7 @@ class CubeDesignComponent extends DesignerTypeElementComponent {
     datatype(name) { return this.types.find(t => t.name == name)?.title; }
 }
 CubeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", 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.5", 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()\" [state]=\"state\">\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\" fxLayoutAlign=\"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    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n      <div class=\"row actions\">\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n      <br />\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 fxFlex>\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    <!--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      {{'Views'|translate}}\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"add(views, newView(), 'View', 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  </form>\r\n</ng-template>\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            <ng-container *ngIf=\"accumulative\">\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            </ng-container>\r\n            <mat-option value=\"Column\">{{'Column'|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=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </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=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </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'}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'}}</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>{{'Single'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Search'|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'}}</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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.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: i4$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$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: "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$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "state"], outputs: ["continue", "save"] }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+CubeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", 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()\" [state]=\"state\">\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\" fxLayoutAlign=\"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    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n      <div class=\"row actions\">\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n      <br />\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 fxFlex>\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    <!--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      {{'Views'|translate}}\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"add(views, newView(), 'View', 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  </form>\r\n</ng-template>\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            <ng-container *ngIf=\"accumulative\">\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            </ng-container>\r\n            <mat-option value=\"Column\">{{'Column'|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=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </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=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </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'}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'}}</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>{{'Single'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Search'|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'}}</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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.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: i8.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: "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$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "state"], outputs: ["continue", "save"] }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: CubeDesignComponent, decorators: [{
             type: Component,
             args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" (continue)=\"complete()\" [state]=\"state\">\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\" fxLayoutAlign=\"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    <ng-container *ngIf=\"view; else main\">\r\n      <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n      <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n        <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n      </div>\r\n      <div class=\"row actions\">\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n<!---->\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button color=\"warn\">{{'Global'|translate}}</mat-radio-button>\r\n      <br />\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 fxFlex>\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    <!--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      {{'Views'|translate}}\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"add(views, newView(), 'View', 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  </form>\r\n</ng-template>\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            <ng-container *ngIf=\"accumulative\">\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            </ng-container>\r\n            <mat-option value=\"Column\">{{'Column'|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=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </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=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|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=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          </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=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </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'}}</mat-checkbox></div>\r\n    <div><mat-checkbox formControlName=\"sensitive\">{{'Sensitive'}}</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>{{'Single'|translate}}</mat-option>\r\n        <mat-option value=\"Multiple\">{{'Multiple'|translate}}</mat-option>\r\n        <mat-option value=\"Search\">{{'Search'|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'}}</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"] }]
@@ -34008,7 +34027,7 @@ let MatrixViewDesignComponent = class MatrixViewDesignComponent extends Designer
     }
 };
 MatrixViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatrixViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <ng-container *ngIf=\"view; else main\">\r\n    <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n    <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n      <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n    </div>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required>\r\n          <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value !== a.name && form.get('series').value !== a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n        <mat-select formControlName=\"aggregate\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name && form.get('series').value !== a.name && form.get('filters').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <table class=\"mat-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <tr class=\"mat-row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <td class=\"mat-cell\">\r\n          <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        </td>\r\n        <td class=\"mat-cell\">{{s.get('title').value}}</td>\r\n        <td class=\"mat-cell\">\r\n          <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n          <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n    <button mat-icon-button (click)=\"add(sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n  </form>\r\n</ng-template>\r\n<ng-template #sumform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-radio-group formControlName=\"axis\">\r\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field>\r\n      <mat-label>{{'Calculate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"calculate\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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.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: 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: i4$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3$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: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+MatrixViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'widget'; else edit\">\r\n</ng-container>\r\n<ng-template #edit>\r\n  <ng-container *ngIf=\"view; else main\">\r\n    <h2 class=\"mat-title\">{{context.title|translate}}</h2>\r\n    <div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\r\n      <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\r\n    </div>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #main>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required>\r\n          <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('xAxis').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value !== a.name && form.get('series').value !== a.name\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n        <mat-select formControlName=\"aggregate\" multiple>\r\n          <ng-container *ngFor=\"let a of cube?.axes\">\r\n            <mat-option *ngIf=\"form.get('xAxis').value!==a.name && form.get('series').value !== a.name && form.get('filters').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-hint></mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <table class=\"mat-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <tr class=\"mat-row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <td class=\"mat-cell\">\r\n          <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        </td>\r\n        <td class=\"mat-cell\">{{s.get('title').value}}</td>\r\n        <td class=\"mat-cell\">\r\n          <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n          <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n    <button mat-icon-button (click)=\"add(sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n  </form>\r\n</ng-template>\r\n<ng-template #sumform let-form>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    <mat-radio-group formControlName=\"axis\">\r\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field>\r\n      <mat-label>{{'Calculate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"calculate\">\r\n        <mat-option>{{'None'|translate}}</mat-option>\r\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$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.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: 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: 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: i9$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 MatrixViewDesignComponent = __decorate([
     BizDoc({ selector: 'matrix-view-designer' })
 ], MatrixViewDesignComponent);
@@ -34241,7 +34260,7 @@ let UsageReportDesignComponent = class UsageReportDesignComponent extends Design
     }
 };
 UsageReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: UsageReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UsageReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: UsageReportDesignComponent, 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    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple [sortComparator]=\"sortComparator\">\r\n            <ng-container *ngFor=\"let a of cube?.axes\">\r\n              <mat-option *ngIf=\"form.get('series').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n    <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", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: 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.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$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3$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: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+UsageReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: UsageReportDesignComponent, 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    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple [sortComparator]=\"sortComparator\">\r\n        <mat-option *ngFor=\"let a of cube?.axes\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"form.get('series').hasError('required')\" [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple [sortComparator]=\"sortComparator\">\r\n            <ng-container *ngFor=\"let a of cube?.axes\">\r\n              <mat-option *ngIf=\"form.get('series').value?.indexOf(a.name) < 0\" [value]=\"a.name\">{{a.title }}</mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [sortComparator]=\"sortComparator\">\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n    <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", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: 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.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: 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: 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: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 UsageReportDesignComponent = __decorate([
     BizDoc({ selector: 'usage-report-designer' })
 ], UsageReportDesignComponent);