@bizdoc/core 1.17.19 → 1.17.21

package/fesm2020/bizdoc-core.mjs

@@ -14099,8 +14099,9 @@ class UtilityRef {
 /** utility-wrapper component*/
 class UtilityPaneComponent {
     /** ctor */
-    constructor(_session, _pane, _http, _sb, _messaging, _cf, _injector) {
+    constructor(_session, _vc, _pane, _http, _sb, _messaging, _cf, _injector) {
         this._session = _session;
+        this._vc = _vc;
         this._pane = _pane;
         this._http = _http;
         this._sb = _sb;
@@ -14114,29 +14115,24 @@ class UtilityPaneComponent {
             this._utility = this._session.profile.utilities.find(u => u.name === id);
             this._pane.title = this._utility.title;
             const factory = this._cf.resolve(this._utility.template);
-            this.vc.clear();
+            this._vc.clear();
             const uRef = new UtilityRef(this._utility, this._messaging, this._sb, this._http);
             const injector = Injector.create([{
                     provide: UtilityRef, useValue: uRef
                 }], this._injector);
-            this.vc.createComponent(factory, 0, injector);
+            this._vc.createComponent(factory, 0, injector);
         });
     }
 }
-UtilityPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UtilityPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: i1$3.HttpClient }, { token: PromptService }, { token: HubService }, { token: BizDocComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UtilityPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UtilityPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true });
+UtilityPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UtilityPaneComponent, deps: [{ token: SessionService }, { token: i0.ViewContainerRef }, { token: PaneRef }, { token: i1$3.HttpClient }, { token: PromptService }, { token: HubService }, { token: BizDocComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+UtilityPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UtilityPaneComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UtilityPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '<ng-container #container></ng-container>',
-                    host: {
-                        class: 'pane'
-                    }
+                    template: '',
+                    //encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: PaneRef }, { type: i1$3.HttpClient }, { type: PromptService }, { type: HubService }, { type: BizDocComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { vc: [{
-                type: ViewChild,
-                args: ['container', { static: true, read: ViewContainerRef }]
-            }] } });
+        }], ctorParameters: function () { return [{ type: SessionService }, { type: i0.ViewContainerRef }, { type: PaneRef }, { type: i1$3.HttpClient }, { type: PromptService }, { type: HubService }, { type: BizDocComponentFactoryResolver }, { type: i0.Injector }]; } });
 
 const START_NODE = 'start';
 const You = 'you';
@@ -31558,14 +31554,16 @@ let PositionsComponent = class PositionsComponent {
     }
 };
 PositionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PositionsComponent, deps: [{ token: SessionService }, { token: UtilityRef }, { token: DatasourceService }, { token: PromptService }, { token: WindowTitleService }, { token: TranslateService }, { token: Popup }, { token: SystemService }, { token: i2$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PositionsComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of datatypes|async\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i4$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PositionsComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of datatypes\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i4$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 PositionsComponent = __decorate([
     BizDoc({ selector: 'bizdoc-positions' })
     /** positions component*/
 ], PositionsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PositionsComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of datatypes|async\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\n"] }]
+            args: [{ host: {
+                        class: 'pane'
+                    }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"row flex\">\r\n  <mat-list class=\"timeline\" [style.display]=\"tools?'':'none'\">\r\n    <mat-list-item *ngFor=\"let t of datatypes\" (click)=\"change(t.name)\" [class.active]=\"t === type\">{{t.title}}</mat-list-item>\r\n  </mat-list>\r\n  <table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\" class=\"flex\">\r\n    <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n      <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"key\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <span [ngSwitch]=\"element.type\">\r\n          <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n          <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n          <ng-container *ngSwitchDefault>\r\n            {{element.key}}\r\n          </ng-container>\r\n        </span>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"value\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{element.value}}\r\n      </td>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n      <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\" class=\"role-column\">\r\n        <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n          <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n            <ng-container *ngIf=\"!first\">, </ng-container>\r\n            {{profiles[u]?.name}}\r\n          </ng-container>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"options\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <ng-container *ngIf=\"element.type === 'pattern'\">\r\n            <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"element.type === 'group'\">\r\n            <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n          </ng-container>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n  </table>\r\n</div>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"role.value\" color=\"primary\" [disabled]=\"!role.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" class=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"group.value\" color=\"primary\" [disabled]=\"!group.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<!--<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>-->\r\n", styles: [":host{flex-direction:column}table{width:100%}.form{padding:8px}:host ::ng-deep .mat-list-item{cursor:pointer}table ::ng-deep .role-column{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
@@ -33499,7 +33497,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{ template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Guide'|translate}}</mat-label>\r\n        <mat-select formControlName=\"guide\">\r\n          <mat-option>{{'None'|translate}}</mat-option>\r\n          <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
-const CHARACTER = /[\w]|Spacebar/;
 /** */
 let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     constructor(_panes, _translate, _ps, _session, _element, _injector, _ref) {
@@ -33729,13 +33726,16 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     }
 };
 ConfigurationDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfigurationDesignerComponent, deps: [{ token: PanesRouter }, { token: TranslateService }, { token: PromptService }, { token: SessionService }, { token: i0.ElementRef }, { token: i0.Injector }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfigurationDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ConfigurationDesignerComponent, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title|localizedString}}\r\n        <span class=\"divider\"></span>\r\n        <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n      </mat-card-content>\r\n      <mat-card-actions class=\"row\">\r\n        <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n        <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px 8px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px;display:flex;flex-direction:column}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}:host ::ng-deep .mat-card-header-text{width:100%}:host ::ng-deep .mat-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i8$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] });
+ConfigurationDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ConfigurationDesignerComponent, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<div class=\"flex\">\r\n  <section *ngFor=\"let s of sections\">\r\n    <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n    <!--<hr />-->\r\n    <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n      <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n        <!-- @item-->\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n      </mat-card>\r\n      <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n        <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n        <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n        <mat-menu #templateMenu>\r\n          <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n            <span *ngIf=\"t.family\">\r\n              {{t.family}}\r\n              &nbsp;-&nbsp;\r\n            </span>\r\n            <span>\r\n              {{t.title}}\r\n            </span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</div>\r\n", styles: [":host{outline:none}section h2{margin:10px 8px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px;display:flex;flex-direction:column}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}:host ::ng-deep .mat-card-header-text{width:100%}:host ::ng-deep .mat-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i8$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] });
 ConfigurationDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-designer' })
 ], ConfigurationDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfigurationDesignerComponent, decorators: [{
             type: Component,
-            args: [{ animations: [itemAnimation], host: { tabindex: '0' }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title|localizedString}}\r\n        <span class=\"divider\"></span>\r\n        <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n      </mat-card-content>\r\n      <mat-card-actions class=\"row\">\r\n        <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n        <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px 8px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px;display:flex;flex-direction:column}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}:host ::ng-deep .mat-card-header-text{width:100%}:host ::ng-deep .mat-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-card-content{flex:1}\n"] }]
+            args: [{ animations: [itemAnimation], host: {
+                        tabindex: '0',
+                        class: 'pane'
+                    }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<div class=\"flex\">\r\n  <section *ngFor=\"let s of sections\">\r\n    <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n    <!--<hr />-->\r\n    <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n      <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n        <!-- @item-->\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n      </mat-card>\r\n      <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n        <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n        <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n        <mat-menu #templateMenu>\r\n          <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n            <span *ngIf=\"t.family\">\r\n              {{t.family}}\r\n              &nbsp;-&nbsp;\r\n            </span>\r\n            <span>\r\n              {{t.title}}\r\n            </span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</div>\r\n", styles: [":host{outline:none}section h2{margin:10px 8px;font-size:28px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px;display:flex;flex-direction:column}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}:host ::ng-deep .mat-card-header-text{width:100%}:host ::ng-deep .mat-card-title{display:flex;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-card-content{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: PanesRouter }, { type: TranslateService }, { type: PromptService }, { type: SessionService }, { type: i0.ElementRef }, { type: i0.Injector }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -34149,13 +34149,15 @@ let FormDesignerComponent = class FormDesignerComponent {
     }
 };
 FormDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormDesignerComponent, deps: [{ token: i1.FormBuilder }, { token: PaneRef }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: SystemService }, { token: TranslateService }, { token: PanesRouter }, { token: SessionService }, { token: i0.ElementRef }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
-FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FormDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignControlComponent, selector: "bizdoc-box-control-design", inputs: ["metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FormDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignControlComponent, selector: "bizdoc-box-control-design", inputs: ["metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FormDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-form-designer' })
 ], FormDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormDesignerComponent, decorators: [{
             type: Component,
-            args: [{ entryComponents: [SectionPropertiesComponent, ControlPropertiesComponent, BoxSettingsComponent], template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
+            args: [{ host: {
+                        class: 'pane'
+                    }, entryComponents: [SectionPropertiesComponent, ControlPropertiesComponent, BoxSettingsComponent], template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <button mat-icon-button (click)=\"undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"historyIndex === -1\"><mat-icon class=\"mat-icon-rtl-mirror\">undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"historyIndex === history.length - 1\"><mat-icon class=\"mat-icon-rtl-mirror\">redo</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"opensettings()\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>-->\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"model\">\r\n  <div cdkDropList (cdkDropListDropped)=\"drop($event, sections)\">\r\n    <section class=\"column\" *ngFor=\"let s of sections.controls; let si = index\" cdkDrag [attr.data-index]=\"si\">\r\n      <div class=\"row\">\r\n        <mat-icon class=\"section-drag\" cdkDragHandle>drag_indicator</mat-icon>\r\n        <div class=\"column\" [formGroup]=\"s\">\r\n          <h2 class=\"mat-title\">{{s.get('title').value|localizedString}}</h2>\r\n          <p class=\"mat-body-1\" *ngIf=\"s.get('note').value\">{{s.get('note').value|localizedString}}</p>\r\n          <div cdkDropList (cdkDropListDropped)=\"drop($event, s.get('rows'))\">\r\n            <div *ngFor=\"let r of s.get('rows').controls; let ri = index\" class=\"row designer-row\" cdkDrag [attr.data-index]=\"ri\">\r\n              <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n              <div cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event, r.get('fields'))\" class=\"row\">\r\n                <div *ngFor=\"let f of r.get('fields').controls; let fi = index\" cdkDrag class=\"designer-field row\" [attr.data-index]=\"fi\">\r\n                  <!--<mat-icon cdkDragHandle>{{iconOf(f.value.type)}}</mat-icon>-->\r\n                  <bizdoc-box-control-design [metadata]=\"f.value\"></bizdoc-box-control-design>\r\n                  <div class=\"tools\">\r\n                    <button mat-stroked-button (click)=\"removeField(r, f)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                    <button mat-stroked-button (click)=\"editField(f)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n                  </div>\r\n                  <!--<div *cdkDragPlaceholder class=\"drag-placeholder\"></div>-->\r\n                </div>\r\n              </div>\r\n              <div class=\"column\">\r\n                <button mat-stroked-button [matMenuTriggerFor]=\"fieldMenu\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n                <mat-menu #fieldMenu>\r\n                  <button mat-menu-item *ngFor=\"let c of controls\" (click)=\"addField(s, r, c, $event)\">\r\n                    <mat-icon>{{c.icon}}</mat-icon>\r\n                    <span>{{c.title}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n                <span class=\"divider\"></span>\r\n                <div class=\"tools\">\r\n                  <button mat-stroked-button (click)=\"removeRow(s, r)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"tools row\">\r\n        <button mat-stroked-button (click)=\"addRow(s, $event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-stroked-button (click)=\"removeSection(s)\" [bizdocTooltip]=\"'Discard'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-stroked-button (click)=\"editSection(s)\" [bizdocTooltip]=\"'Settings'|translate\" type=\"button\"><mat-icon>settings</mat-icon></button>\r\n      </div>\r\n    </section>\r\n    <button mat-stroked-button (click)=\"addSection($event)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:8px}:host ::ng-deep .cdk-drag-handle{cursor:move}section,.designer-row{border:2px solid transparent;border-radius:3px;padding:8px}.designer-field button{opacity:.1}.designer-field:hover button{opacity:1}section:hover,.designer-row:hover{border:2px dotted}section .designer-row{margin:5px 0}section .designer-row .designer-field{flex:1}.drag-placeholder{border:2px dashed}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: PaneRef }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: SystemService }, { type: TranslateService }, { type: PanesRouter }, { type: SessionService }, { type: i0.ElementRef }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]