@bizdoc/core 1.16.11 → 1.16.12

package/fesm2020/bizdoc-core.mjs

@@ -17868,6 +17868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             args: [{ selector: 'bizdoc-impersonate', template: "<h2 mat-dialog-title>{{'Impersonate' | translate}}</h2>\r\n<mat-dialog-content>\r\n  <p class=\"mat-body-1\">{{'ImpersonateHelp' | translate}}</p>\r\n  <mat-form-field>\r\n    <input matInput type=\"search\" [matAutocomplete]=\"auto\" [placeholder]=\"'Associate' | translate\" required [formControl]=\"username\"  />\r\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                      (optionSelected)=\"change($event)\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"go()\" [disabled]=\"!item || logging\" color=\"primary\">{{'Login' | translate}}</button>\r\n  <button mat-button [mat-dialog-close]>{{'Cancel' | translate }}</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-form-field{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: SessionService }, { type: i2$3.MatDialogRef }]; } });
 
+const IMPERSONATE_COOKIE_NAME = 'i';
 /** sign component*/
 class QuickSignComponent {
     /** options ctor */
@@ -17885,6 +17886,7 @@ class QuickSignComponent {
         };
         this._ps.ask('SignOutAsk', 'SignOut', { ok: 'Yes', cancel: 'No' }).subscribe(ok => {
             if (ok) {
+                eraseCookie(IMPERSONATE_COOKIE_NAME);
                 if (this._auth.signOut)
                     this._auth.signOut().
                         then(task);
@@ -17908,7 +17910,10 @@ QuickSignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: QuickSignComponent, decorators: [{
             type: Component,
             args: [{ template: "<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" (click)=\"impersonate()\">\r\n    <mat-icon matListIcon>\r\n        admin_panel_settings\r\n    </mat-icon>\r\n    <h4 matLine>{{'Impersonate' | translate}}</h4>\r\n  </mat-list-item>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"signOut()\">\r\n    <mat-icon matListIcon>\r\n        power_settings_new\r\n    </mat-icon>\r\n    <h4 matLine>{{'SignOut' | translate}}</h4>\r\n  </mat-list-item>\r\n</mat-nav-list>\r\n" }]
-        }], ctorParameters: function () { return [{ type: PromptService }, { type: AuthenticationImpl }, { type: i2$3.MatDialog }, { type: PopupRef }]; } });
+        }], ctorParameters: function () { return [{ type: PromptService }, { type: AuthenticationImpl }, { type: i2$3.MatDialog }, { type: PopupRef }]; } });
+function eraseCookie(name) {
+    document.cookie = name + '=; Max-Age=-99999999;';
+}
 
 /** about component*/
 class AboutDialog {
@@ -30524,6 +30529,10 @@ class DesignerItemComponent {
         this.form.addControl('name', name);
         this.form.addControl('title', title);
         if (this.model.privileges) {
+            this.rolesfilter = this._fb.control(null);
+            this.rolesfilter.valueChanges.pipe(debounceTime$1(150)).subscribe(v => {
+                this.froles = this.roles.filter(r => (r.title || r.name).indexOf(v) > -1);
+            });
             this.form.addControl('privileges', this._fb.group({
                 rule: null,
                 roles: this._fb.control(null),
@@ -30581,10 +30590,10 @@ class DesignerItemComponent {
     }
 }
 DesignerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DesignerItemComponent, deps: [{ token: DesignerRef }, { token: i0.ElementRef }, { token: PaneRef, optional: true }, { token: i2.FormBuilder }, { token: BizDocComponentFactoryResolver }, { token: SystemService }], target: i0.ɵɵFactoryTarget.Component });
-DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { form: "form" }, outputs: { onContinue: "continue", onSave: "save" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }], ngImport: i0, template: "<ng-conatiner [ngSwitch]=\"mode\">\r\n  <ng-container *ngSwitchCase=\"'add'\">\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\">{{'Continue'|translate}}&nbsp;<mat-icon>double_arrow</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p class=\"help\">{{model.help}}</p>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\"\r\n          (document:keydown)=\"handleKeyboardEvent($event)\">\r\n      <!--<ng-container #econtainer></ng-container>-->\r\n      <div class=\"row\" *ngIf=\"form.contains('name')\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required #title />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput formControlName=\"name\" required />\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <p *ngIf=\"model.resource\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'Unlock'|translate\"></p>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"form.contains('privileges')\" formGroupName=\"privileges\">\r\n        <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n        <mat-selection-list formControlName=\"roles\" *ngIf=\"roles\">\r\n          <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n        </mat-selection-list>\r\n        <mat-form-field>\r\n          <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n          <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </form>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <div [innerHTML]=\"(svg[model.family]|sanitizeHtml)||model.family\" *ngIf=\"model.family\"></div>\r\n    <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  </ng-container>\r\n</ng-conatiner>\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}p.message{margin:5px}.actions{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i4$4.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$4.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$1.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: i11.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: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { form: "form" }, outputs: { onContinue: "continue", onSave: "save" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }], ngImport: i0, template: "<ng-conatiner [ngSwitch]=\"mode\">\r\n  <ng-container *ngSwitchCase=\"'add'\">\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\">{{'Continue'|translate}}&nbsp;<mat-icon>double_arrow</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p class=\"help\">{{model.help}}</p>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\"\r\n          (document:keydown)=\"handleKeyboardEvent($event)\">\r\n      <!--<ng-container #econtainer></ng-container>-->\r\n      <div class=\"row\" *ngIf=\"form.contains('name')\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required #title />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput formControlName=\"name\" required />\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <p *ngIf=\"model.resource\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'Unlock'|translate\"></p>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"form.contains('privileges')\" formGroupName=\"privileges\">\r\n        <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n        <input matInput [formControl]=\"rolesfilter\"/>\r\n        <mat-selection-list formControlName=\"roles\" *ngIf=\"roles\">\r\n          <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title||r.name}}</mat-list-option>\r\n        </mat-selection-list>\r\n        <mat-form-field>\r\n          <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n          <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </form>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <div [innerHTML]=\"(svg[model.family]|sanitizeHtml)||model.family\" *ngIf=\"model.family\"></div>\r\n    <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  </ng-container>\r\n</ng-conatiner>\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}p.message{margin:5px}.actions{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i4$4.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$4.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$1.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: i11.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: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DesignerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-element', template: "<ng-conatiner [ngSwitch]=\"mode\">\r\n  <ng-container *ngSwitchCase=\"'add'\">\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\">{{'Continue'|translate}}&nbsp;<mat-icon>double_arrow</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p class=\"help\">{{model.help}}</p>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\"\r\n          (document:keydown)=\"handleKeyboardEvent($event)\">\r\n      <!--<ng-container #econtainer></ng-container>-->\r\n      <div class=\"row\" *ngIf=\"form.contains('name')\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required #title />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput formControlName=\"name\" required />\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <p *ngIf=\"model.resource\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'Unlock'|translate\"></p>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"form.contains('privileges')\" formGroupName=\"privileges\">\r\n        <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n        <mat-selection-list formControlName=\"roles\" *ngIf=\"roles\">\r\n          <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n        </mat-selection-list>\r\n        <mat-form-field>\r\n          <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n          <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </form>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <div [innerHTML]=\"(svg[model.family]|sanitizeHtml)||model.family\" *ngIf=\"model.family\"></div>\r\n    <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  </ng-container>\r\n</ng-conatiner>\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}p.message{margin:5px}.actions{margin:8px}\n"] }]
+            args: [{ selector: 'bizdoc-designer-element', template: "<ng-conatiner [ngSwitch]=\"mode\">\r\n  <ng-container *ngSwitchCase=\"'add'\">\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n    <div class=\"row actions\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-stroked-button [disabled]=\"!form.valid\" (click)=\"continue()\">{{'Continue'|translate}}&nbsp;<mat-icon>double_arrow</mat-icon></button>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'edit'\">\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"save()\" [disabled]=\"!form.valid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n    </mat-toolbar>\r\n    <p class=\"help\">{{model.help}}</p>\r\n    <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\"\r\n          (document:keydown)=\"handleKeyboardEvent($event)\">\r\n      <!--<ng-container #econtainer></ng-container>-->\r\n      <div class=\"row\" *ngIf=\"form.contains('name')\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required #title />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Name'|translate}}</mat-label>\r\n          <input matInput formControlName=\"name\" required />\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <p *ngIf=\"model.resource\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'Unlock'|translate\"></p>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n\r\n      <ng-container *ngIf=\"form.contains('privileges')\" formGroupName=\"privileges\">\r\n        <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n        <input matInput [formControl]=\"rolesfilter\"/>\r\n        <mat-selection-list formControlName=\"roles\" *ngIf=\"roles\">\r\n          <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title||r.name}}</mat-list-option>\r\n        </mat-selection-list>\r\n        <mat-form-field>\r\n          <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n          <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </form>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <div [innerHTML]=\"(svg[model.family]|sanitizeHtml)||model.family\" *ngIf=\"model.family\"></div>\r\n    <ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n    <ng-container *ngIf=\"options\" (attached)=\"attached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  </ng-container>\r\n</ng-conatiner>\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}p.message{margin:5px}.actions{margin:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]