@bizdoc/core 3.3.5 → 3.3.7

package/fesm2022/bizdoc-core.mjs

@@ -14,7 +14,7 @@ import { Loader } from '@googlemaps/js-api-loader';
 import * as firebase from 'firebase/app';
 import { getMessaging, deleteToken, getToken } from 'firebase/messaging';
 import * as i1 from '@angular/common/http';
-import { HttpRequest, HttpResponse, HttpEventType, HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi, HttpClientModule } from '@angular/common/http';
+import { HttpRequest, HttpResponse, HttpEventType, HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import * as i2 from 'ngx-cookie-service';
 import { CookieService } from 'ngx-cookie-service';
 import * as i10 from '@angular/material/icon';
@@ -3605,6 +3605,7 @@ class OptionsComponent {
                 myDocumentStateChange: this._fb.control(false),
                 cubeAnomaly: this._fb.control(false),
                 sound: this._fb.control(false),
+                extra: this._fb.group({}),
             }),
             tags: this._fb.control(null),
             emails: this._fb.group({
@@ -3634,6 +3635,9 @@ class OptionsComponent {
             return item ? item.name : null;
         };
         this.guides = this._guide.guides.filter(g => g.mode !== 'Private');
+        if (!this._session.isImpersonating) {
+            this.guidesCount = this.guides.filter(w => w.mode === 'Eager').length || null;
+        }
         this.languages = this._session.languages;
         this.currentLanguage = this._session.language;
         this.available = this._session.state;
@@ -3641,6 +3645,7 @@ class OptionsComponent {
         this.profile = this._session.profile;
         this.voting = !config.comments || config.comments.voting !== false;
         this.options = this._session.profile.options;
+        this._session.profile.notifications.forEach(n => n.settings !== false && this.form.controls.notifications.controls.extra.addControl(n.name, _fb.control(null)));
     }
     close() {
         this.form.valid &&
@@ -3671,9 +3676,6 @@ class OptionsComponent {
     }
     ngOnInit() {
         this._hub.state$.pipe(startWith(this._hub.state), takeUntil(this._destroy)).subscribe(s => this.online = s === HubConnectionState.Connected);
-        if (!this._session.isImpersonating) {
-            this.guidesCount = this.guides.filter(w => w.mode === 'Eager').length || null;
-        }
         const { outOfOffice, grantAccess, notifications, emails } = this.form.controls;
         this.form.patchValue(this.options, { emitEvent: false });
         if (!this.options.notifications.active)
@@ -3809,11 +3811,11 @@ class OptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OptionsComponent, deps: [{ token: PromptService }, { token: GuideService }, { token: HubService }, { token: i2$2.MatDialog }, { token: i1$3.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: SessionService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n      @if (profile.byName) {\r\n      {{profile.byName}} \\\r\n      }\r\n      {{profile.name}}\r\n    </span>\r\n  </div>\r\n\r\n  <mat-divider />\r\n\r\n  <div class=\"row\">\r\n    <mat-nav-list class=\"nav-list\">\r\n      <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n        <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n        <span matListItemTitle>{{'Emails' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n        <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n        <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n        <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n    <div class=\"separator\"></div>\r\n    <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n      <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n    </form>\r\n  </div>\r\n  <mat-divider />\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n  }\r\n  <!--themes-->\r\n  @if (themes.length > 1) {\r\n  <div class=\"row center\">\r\n    @for (t of themes; track t) {\r\n    <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n  <mat-divider></mat-divider>\r\n  <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n  @for (g of guides; track g) {\r\n  <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n  <div class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Tags'|translate}}</mat-label>\r\n      <mat-chip-grid #chips>\r\n        @for (item of form.value.tags; track item) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n          {{item}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n             [matChipInputAddOnBlur]=\"true\"\r\n             (matChipInputTokenEnd)=\"addTag($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n  </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                        (optionSelected)=\"oooSelected($event)\">\r\n        @for (u of susers$ | async; track u.id) {\r\n        <mat-option [value]=\"u\">\r\n          <span>{{u.name}}</span>\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Dates'|translate}}</mat-label>\r\n      <mat-date-range-input [rangePicker]=\"dates\">\r\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field>\r\n      <mat-label>{{'Associates'| translate}}</mat-label>\r\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n        @for (u of form.value.grantAccess.users || []; track u.id) {\r\n        <mat-chip-row (removed)=\"removeGrant(u)\">\r\n          {{u | userName | async}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [formControl]=\"grantUserIds\"\r\n             #grantInput\r\n             [matAutocomplete]=\"grantAuto\"\r\n             [matChipInputFor]=\"grantList\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n        @for (u of gusers$ | async; track u.id) {\r\n        <mat-option [value]=\"u.id\">\r\n          {{u.name}}\r\n          @if (u.email) {\r\n          <span>&nbsp; - {{u.email}}</span>\r\n          }\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--keys-->\r\n    @if(!isMobile) {\r\n    <dl class=\"keys mat-body-2\">\r\n        <dt>Alt+n</dt>\r\n        <dd>{{'AltNHelp'|translate}}</dd>\r\n        <dt>Ctrl+s</dt>\r\n        <dd>{{'CtrlSHelp'|translate}}</dd>\r\n        <dt>Alt+s</dt>\r\n        <dd>{{'AltSHelp'|translate}}</dd>\r\n        <dt>Alt+q</dt>\r\n        <dd>{{'AltQHelp'|translate}}</dd>\r\n        <dt>Alt+a</dt>\r\n        <dd>{{'AltAHelp'|translate}}</dd>\r\n        <dt>Alt+h</dt>\r\n        <dd>{{'AltHHelp'|translate}}</dd>\r\n        <dt>Ctrl+.</dt>\r\n        <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n    </dl>\r\n    }\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n    <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n        {{currentLanguage | translate}}\r\n        <mat-icon>arrow_drop_down</mat-icon>\r\n        <!--'ChangeLanguage'-->\r\n    </button>\r\n    <mat-menu #language>\r\n        @for (l of languages; track l) {\r\n        <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n        }\r\n    </mat-menu>\r\n    @if (online) {\r\n    <button mat-button [matMenuTriggerFor]=\"availability\">\r\n        {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n        <mat-icon>arrow_drop_down</mat-icon>\r\n    </button>\r\n    }\r\n    <mat-menu #availability>\r\n        @for (m of modes; track m) {\r\n        <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n        }\r\n    </mat-menu>\r\n    <span class=\"divider\"></span>\r\n    <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n    @if (!online) {\r\n    <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n        <mat-icon>wifi_off</mat-icon>\r\n    </button>\r\n    }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n                @for (item of form.value.tags; track item) {\r\n                <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n                    {{item}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    <span>{{u.name}}</span>\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"dates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n      @if (profile.byName) {\r\n      {{profile.byName}} \\\r\n      }\r\n      {{profile.name}}\r\n    </span>\r\n  </div>\r\n\r\n  <mat-divider />\r\n\r\n  <div class=\"row\">\r\n    <mat-nav-list class=\"nav-list\">\r\n      <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n        <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n        <span matListItemTitle>{{'Emails' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n        <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n        <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n        <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n    <div class=\"separator\"></div>\r\n    <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n      <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n    </form>\r\n  </div>\r\n  <mat-divider />\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n  }\r\n  <!--themes-->\r\n  @if (themes.length > 1) {\r\n  <div class=\"row center\">\r\n    @for (t of themes; track t) {\r\n    <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n  <mat-divider></mat-divider>\r\n  <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n  @for (g of guides; track g) {\r\n  <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n  <div class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Tags'|translate}}</mat-label>\r\n      <mat-chip-grid #chips>\r\n        @for (item of form.value.tags; track item) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n          {{item}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n             [matChipInputAddOnBlur]=\"true\"\r\n             (matChipInputTokenEnd)=\"addTag($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n  </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                        (optionSelected)=\"oooSelected($event)\">\r\n        @for (u of susers$ | async; track u.id) {\r\n        <mat-option [value]=\"u\">\r\n          <span>{{u.name}}</span>\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Dates'|translate}}</mat-label>\r\n      <mat-date-range-input [rangePicker]=\"dates\">\r\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field>\r\n      <mat-label>{{'Associates'| translate}}</mat-label>\r\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n        @for (u of form.value.grantAccess.users || []; track u.id) {\r\n        <mat-chip-row (removed)=\"removeGrant(u)\">\r\n          {{u | userName | async}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [formControl]=\"grantUserIds\"\r\n             #grantInput\r\n             [matAutocomplete]=\"grantAuto\"\r\n             [matChipInputFor]=\"grantList\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n        @for (u of gusers$ | async; track u.id) {\r\n        <mat-option [value]=\"u.id\">\r\n          {{u.name}}\r\n          @if (u.email) {\r\n          <span>&nbsp; - {{u.email}}</span>\r\n          }\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--keys-->\r\n    @if(!isMobile) {\r\n    <dl class=\"keys mat-body-2\">\r\n        <dt>Alt+n</dt>\r\n        <dd>{{'AltNHelp'|translate}}</dd>\r\n        <dt>Ctrl+s</dt>\r\n        <dd>{{'CtrlSHelp'|translate}}</dd>\r\n        <dt>Alt+s</dt>\r\n        <dd>{{'AltSHelp'|translate}}</dd>\r\n        <dt>Alt+q</dt>\r\n        <dd>{{'AltQHelp'|translate}}</dd>\r\n        <dt>Alt+a</dt>\r\n        <dd>{{'AltAHelp'|translate}}</dd>\r\n        <dt>Alt+h</dt>\r\n        <dd>{{'AltHHelp'|translate}}</dd>\r\n        <dt>Ctrl+.</dt>\r\n        <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n    </dl>\r\n    }\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n    <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n        {{currentLanguage | translate}}\r\n        <mat-icon>arrow_drop_down</mat-icon>\r\n        <!--'ChangeLanguage'-->\r\n    </button>\r\n    <mat-menu #language>\r\n        @for (l of languages; track l) {\r\n        <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n        }\r\n    </mat-menu>\r\n    @if (online) {\r\n    <button mat-button [matMenuTriggerFor]=\"availability\">\r\n        {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n        <mat-icon>arrow_drop_down</mat-icon>\r\n    </button>\r\n    }\r\n    <mat-menu #availability>\r\n        @for (m of modes; track m) {\r\n        <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n        }\r\n    </mat-menu>\r\n    <span class=\"divider\"></span>\r\n    <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n    @if (!online) {\r\n    <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n        <mat-icon>wifi_off</mat-icon>\r\n    </button>\r\n    }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n                @for (item of form.value.tags; track item) {\r\n                <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n                    {{item}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    <span>{{u.name}}</span>\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"dates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: GuideService }, { type: HubService }, { type: i2$2.MatDialog }, { type: i1$3.FormBuilder }, { type: AccountService }, { type: PromptService }, { type: SessionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -7815,7 +7817,8 @@ class PaneRef {
     ;
     get route() { return this._options.route; }
     ;
-    constructor(component, injector, _options) {
+    constructor(component, injector, id, _options) {
+        this.id = id;
         this._options = _options;
         this._command$ = new Subject();
         /** */
@@ -10165,7 +10168,9 @@ function sortActions(a, b) {
 /** compose component responsible for editing a form */
 class ComposePaneComponent {
     /** compose ctor */
-    constructor(_session, _mailbox, _pane, _router) {
+    constructor(_session, _mailbox, _pane, 
+    //private _overlay: Overlay,
+    _router) {
         this._session = _session;
         this._mailbox = _mailbox;
         this._pane = _pane;
@@ -10313,11 +10318,11 @@ class ComposePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ComposePaneComponent, deps: [{ token: SessionService }, { token: MailboxService }, { token: PaneRef }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: ComposePaneComponent, isStandalone: false, selector: "bizdoc-compose-pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: ComposePaneComponent, isStandalone: false, selector: "bizdoc-compose-pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  <!--<ng-template #actionsPane>\r\n    <mat-list>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <mat-list-item (click)=\"send(a.name)\">\r\n        @if(a.icon) {\r\n        <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n        }\r\n        <span matListItemTitle>{{a.title}}</span>\r\n        <span matListItemLine>{{a.note}}</span>\r\n      </mat-list-item>\r\n      }\r\n    </mat-list>\r\n  </ng-template>-->\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ComposePaneComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-compose-pane', template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-compose-pane', template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  <!--<ng-template #actionsPane>\r\n    <mat-list>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <mat-list-item (click)=\"send(a.name)\">\r\n        @if(a.icon) {\r\n        <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n        }\r\n        <span matListItemTitle>{{a.title}}</span>\r\n        <span matListItemLine>{{a.note}}</span>\r\n      </mat-list-item>\r\n      }\r\n    </mat-list>\r\n  </ng-template>-->\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: MailboxService }, { type: PaneRef }, { type: PanesRouter }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -18058,6 +18063,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
+class ContentNotification {
+    ngOnInit() {
+    }
+    constructor(notification, vc) {
+        this.notification = notification;
+        this._factory = inject(BizDocComponentFactoryResolver);
+        this._session = inject(SessionService);
+        const configuration = this._session.profile.notifications.find(n => n.contentType === notification.contentType);
+        const comp = this._factory.component(configuration.template);
+        const compRef = vc.createComponent(comp, {
+        //  injector: Injector.create([{
+        //    provide: NotificationRef,
+        //    value: new NotificationRef()
+        //  }])
+        });
+        compRef.instance.onBind(notification.content);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ContentNotification, deps: [{ token: NOTIFICATION_DATA }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: ContentNotification, isStandalone: false, selector: "bizdoc-notify-content", ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ContentNotification, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'bizdoc-notify-content',
+                    template: ''
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NOTIFICATION_DATA]
+                }] }, { type: i0.ViewContainerRef }] });
+
 class NotificationsService {
     constructor(_http, messaging, _session) {
         this._http = _http;
@@ -18137,7 +18174,7 @@ class NotificationsComponentBase {
             case 'TextMessage':
                 return TextNotification;
             case 'ContentMessage':
-                return TextNotification;
+                return ContentNotification;
             case 'Invite':
                 return InviteNotification;
             case 'UpcomingEvent':
@@ -19743,13 +19780,22 @@ class SlotsComponent {
         this._rtl = this._session.inverse;
         this._resizing = new Subject();
         this._destroy = new Subject();
+        this._counter = 0;
         _session.themeChange.
             subscribe(() => this.accent = _session.getAccent());
         this._routes = prepareRoutes(data);
+        this._router._comm$.
+            subscribe(e => {
+            switch (e) {
+                case 'collapse':
+                    this.collapse();
+                    break;
+                default:
+            }
+        });
     }
     ngOnInit() {
-        this._router._navigate$.
-            subscribe(async (n) => {
+        this._router._navigate$.subscribe(async (n) => {
             const { commands, component, pathMode, relativeTo, injector } = n;
             let { icon, title, group, help, policy, queryParams, state: data } = n;
             let queryString, params, parent, path, route;
@@ -19966,20 +20012,12 @@ class SlotsComponent {
             else
                 this._deserialize(location.pathname.substring(1));
         });
-        this._router._comm$.
-            subscribe(e => {
-            switch (e) {
-                case 'collapse':
-                    this.collapse();
-                    break;
-                default:
-            }
-        });
         if (location.pathname.length > 1)
             this._deserialize(location.pathname.substring(1), history.state && history.state.bizdoc ? history.state : undefined);
         else
             this._navToDefault();
-        this._resizing.pipe(debounceTime(150), takeUntil(this._destroy)).subscribe(this._resize.bind(this));
+        this._resizing.pipe(debounceTime(150), takeUntil(this._destroy)).
+            subscribe(this._resize.bind(this));
     }
     _navToDefault() {
         this._router._navigate$.next({
@@ -20422,7 +20460,8 @@ class SlotsComponent {
      * @param options
      */
     _constract(component, options) {
-        const pane = new PaneRef(component, options.injector || this._injector, options);
+        this._counter += 1;
+        const pane = new PaneRef(component, options.injector || this._injector, this._counter, options);
         pane._command$.subscribe(e => this._paneCommand(e, pane));
         return pane;
     }
@@ -20813,7 +20852,7 @@ class SlotsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SlotsComponent, isStandalone: false, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" >\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" \r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw;box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$7.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SlotsComponent, isStandalone: false, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" >\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p.id; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" \r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw;box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$7.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             panesAnimation,
             paneAnimation,
             paramAnimation,
@@ -20831,7 +20870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" >\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" \r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw;box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
+                    ], template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" >\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p.id; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" \r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw;box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PANES_DATA]
@@ -31007,38 +31046,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 args: ['container', { static: true, read: ViewContainerRef }]
             }] } });
 
-class ContentNotification {
-    ngOnInit() {
-    }
-    constructor(notification, vc) {
-        this.notification = notification;
-        this._factory = inject(BizDocComponentFactoryResolver);
-        this._session = inject(SessionService);
-        const configuration = this._session.profile.notifications.find(n => n.contentType === notification.contentType);
-        const comp = this._factory.component(configuration.template);
-        const compRef = vc.createComponent(comp, {
-        //  injector: Injector.create([{
-        //    provide: NotificationRef,
-        //    value: new NotificationRef()
-        //  }])
-        });
-        compRef.instance.onBind(notification.content);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ContentNotification, deps: [{ token: NOTIFICATION_DATA }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: ContentNotification, isStandalone: false, selector: "bizdoc-notify-content", ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ContentNotification, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'bizdoc-notify-content',
-                    template: ''
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NOTIFICATION_DATA]
-                }] }, { type: i0.ViewContainerRef }] });
-
 /** configuration componenets */
 const CORE_COMPONENTS = [PerformanceWindComponent, PerformanceHiloComponent, CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeInsightComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
@@ -35157,11 +35164,11 @@ class FormDesignComponent extends DesignerTypeElementComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormDesignComponent, deps: [{ token: i1$3.FormBuilder }, { token: PanesRouter }, { token: SystemService }, { token: SessionService }, { token: i0.Injector }, { token: TranslateService }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: FormDesignComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    @if (usage) {\r\n    <ejs-sparkline width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    }\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      @if (guides.length) {\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          @for (g of guides; track g) {\r\n          <mat-option [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n      }\r\n      @if (cubes.length) {\r\n      <mat-form-field>\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          @for (c of cubes; track c) {\r\n          <mat-option [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      }\r\n      <!--Rules-->\r\n      <h2 class=\"mat-h2 row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', 'rule')\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        @for (r of rules.controls; track r; let index = $index) {\r\n        <tr class=\"mat-mdc-row\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{r.controls.title.value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', 'rule')\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n        }\r\n      </table>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template bizdocCustomContent=\"rule\" let-form=\"form\">\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n          @if (form.controls.title.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n          }\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          @if (form.controls.name.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i6$6.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "directive", type: i2$7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: CustomContentDirective, selector: "[bizdocCustomContent]", inputs: ["bizdocCustomContent"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "context"], outputs: ["save", "continue"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: FormDesignComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    @if (usage) {\r\n    <ejs-sparkline width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    }\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row gap flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      @if (guides.length) {\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          @for (g of guides; track g) {\r\n          <mat-option [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n      }\r\n      @if (cubes.length) {\r\n      <mat-form-field>\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          @for (c of cubes; track c) {\r\n          <mat-option [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      }\r\n      <!--Rules-->\r\n      <h2 class=\"mat-h2 row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', 'rule')\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        @for (r of rules.controls; track r; let index = $index) {\r\n        <tr class=\"mat-mdc-row\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{r.controls.title.value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', 'rule')\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n        }\r\n      </table>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template bizdocCustomContent=\"rule\" let-form=\"form\">\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n          @if (form.controls.title.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n          }\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          @if (form.controls.name.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i6$6.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "directive", type: i2$7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "directive", type: CustomContentDirective, selector: "[bizdocCustomContent]", inputs: ["bizdocCustomContent"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "directive", type: WidgetContentDirective, selector: "[bizdocContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "context"], outputs: ["save", "continue"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: L18nPipe, name: "l18n" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormDesignComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    @if (usage) {\r\n    <ejs-sparkline width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    }\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      @if (guides.length) {\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          @for (g of guides; track g) {\r\n          <mat-option [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n      }\r\n      @if (cubes.length) {\r\n      <mat-form-field>\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          @for (c of cubes; track c) {\r\n          <mat-option [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      }\r\n      <!--Rules-->\r\n      <h2 class=\"mat-h2 row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', 'rule')\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        @for (r of rules.controls; track r; let index = $index) {\r\n        <tr class=\"mat-mdc-row\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{r.controls.title.value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', 'rule')\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n        }\r\n      </table>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template bizdocCustomContent=\"rule\" let-form=\"form\">\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n          @if (form.controls.title.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n          }\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          @if (form.controls.name.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+            args: [{ standalone: false, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\" [icon]=\"true\" [context]=\"context\">\r\n  <ng-template bizdocContent>\r\n    @if (usage) {\r\n    <ejs-sparkline width='250px' height='200px'\r\n                   type=\"Line\"\r\n                   [id]=\"model.name\"\r\n                   [fill]=\"primary\"\r\n                   [dataSource]=\"usage\"\r\n                   xName=\"date\"\r\n                   yName=\"count\"\r\n                   lineWidth=\"2\"\r\n                   valueType=\"DateTime\"\r\n                   [locale]=\"locale\"\r\n                   [markerSettings]=\"markerSettings\"\r\n                   [tooltipSettings]=\"tooltipSettings\"\r\n                   (tooltipInitialize)=\"tooltipInitialize($event)\"\r\n                   [enableRtl]=\"enableRtl\">\r\n    </ejs-sparkline>\r\n    }\r\n    <div class=\"row\">\r\n      <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [disabled]=\"model.draft\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <button mat-menu-item (click)=\"invite()\">{{'Invite'|l18n}}</button>\r\n      </mat-menu>\r\n    </div>\r\n  </ng-template>\r\n  <!--edit-->\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row gap flex\" [formGroup]=\"format\">\r\n        <mat-form-field>\r\n          <mat-label>{{'Prefix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"prefix\" />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Digits'|translate}}</mat-label>\r\n          <input matInput formControlName=\"digits\" maxlength=\"2\" />\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Suffix'|translate}}</mat-label>\r\n          <input matInput formControlName=\"suffix\" />\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-localized-string formControlName=\"group\" [placeholder]=\"'Group'|translate\"></bizdoc-localized-string>\r\n      <bizdoc-localized-string formControlName=\"description\" [placeholder]=\"'Description'|translate\"></bizdoc-localized-string>\r\n      @if (guides.length) {\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          @for (g of guides; track g) {\r\n          <mat-option [value]=\"g.name\">{{g.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n      }\r\n      @if (cubes.length) {\r\n      <mat-form-field>\r\n        <mat-label>{{'Cube'|translate}}</mat-label>\r\n        <mat-select formControlName=\"cubes\" multiple>\r\n          @for (c of cubes; track c) {\r\n          <mat-option [value]=\"c.name\">{{c.title |localizedString}}</mat-option>\r\n          }\r\n        </mat-select>\r\n        <mat-hint>{{'FormCubeHelp'|translate}}</mat-hint>\r\n      </mat-form-field>\r\n      }\r\n      <!--Rules-->\r\n      <h2 class=\"mat-h2 row\">\r\n        {{'Rules'|translate}}\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"add(rules, newRule(), 'Rule', 'rule')\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\r\n      </h2>\r\n      <table formArrayName=\"rules\" class=\"mat-mdc-table\" cdkDropList (cdkDropListDropped)=\"drop($event, rules)\">\r\n        @for (r of rules.controls; track r; let index = $index) {\r\n        <tr class=\"mat-mdc-row\" [formGroup]=\"r\" cdkDrag>\r\n          <td class=\"mat-mdc-cell\">\r\n            <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n          </td>\r\n          <td class=\"mat-mdc-cell flex\" width=\"99%\">\r\n            {{r.controls.title.value}}\r\n          </td>\r\n          <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\r\n            <button mat-icon-button (click)=\"edit(r, 'Rule', 'rule')\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button (click)=\"rules.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n        }\r\n      </table>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template bizdocCustomContent=\"rule\" let-form=\"form\">\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row\">\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n          @if (form.controls.title.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Title'|translate)\"></mat-error>\r\n          }\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          @if (form.controls.name.hasError('required')) {\r\n          <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n      <bizdoc-designer-privileges [form]=\"form\"></bizdoc-designer-privileges>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: PanesRouter }, { type: SystemService }, { type: SessionService }, { type: i0.Injector }, { type: TranslateService }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -35442,6 +35449,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             args: [{ standalone: false, template: "<bizdoc-designer-element [form]=\"form\" [privileges]=\"true\">\r\n  <!-- widget -->\r\n  <ng-template bizdocContent>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd>{{model.regularExpression}}</dd>\r\n    </dl>\r\n  </ng-template>\r\n  <!-- edit -->\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"regularExpression\" [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    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
+class NotificationDesignComponent extends DesignerTypeElementComponent {
+    constructor() {
+        super(...arguments);
+        this.form = this._fb.group({
+            settings: this._fb.control(null)
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NotificationDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: NotificationDesignComponent, isStandalone: false, selector: "bizdoc-notification-designer", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "context"], outputs: ["save", "continue"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NotificationDesignComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'bizdoc-notification-designer', template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+        }] });
+
 const SEARCH_DEBOUNCE = 200;
 /** */
 let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
@@ -35477,7 +35499,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
                     { elements: r.utilities, type: 'Tools', comp: UtilityDesignComponent, templates: r.tUtilities },
                     { elements: r.cubes, type: 'Cubes', comp: CubeDesignComponent, templates: r.tCubes },
                     { elements: r.types, type: 'Types', comp: TypeDesignComponent, templates: r.tTypes },
-                    { elements: r.sources, type: 'Sources', comp: SourceDesignComponent },
+                    { elements: r.sources, type: 'Sources', comp: SourceDesignComponent, templates: r.tSources },
                     { elements: r.actions, type: 'Actions', comp: ActionDesignerComponent, templates: r.tActions },
                     { elements: r.guides, type: 'Guides', comp: GuideDesignComponent, templates: [{ title: this._translate.get('Guide') }] },
                     //{ elements: r.jobs, type: 'Jobs', comp: JobDesignComponent },
@@ -35487,6 +35509,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
                     { elements: r.nodes, type: 'Nodes', comp: NodeDesignerComponent, templates: r.tNodes },
                     { elements: r.attributes, type: 'Attributes', comp: AttributeDesignComponent, templates: r.tAttributes },
                     { elements: r.rules, type: 'Rules', comp: RuleDesignComponent, templates: r.tRules },
+                    { elements: r.notifications, type: 'Notifications', comp: NotificationDesignComponent, templates: r.tNotifications },
                     { elements: r.controls, type: 'Controls', comp: ControlDesignComponent },
                     { elements: r.policies, type: 'Policies', comp: PolicyDesignComponent, templates: r.tPolicies },
                 ];
@@ -35720,7 +35743,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     }
     save() {
         this.saving = true;
-        const { controls, attributes, policies, actions, cubes, folders, forms, guides, reports, roles, rules, states, types, utilities, views, widgets, nodes } = this.model;
+        const { controls, attributes, policies, actions, cubes, folders, forms, guides, reports, roles, notifications, rules, states, types, utilities, views, widgets, nodes } = this.model;
         const model = {
             actions: strip(actions),
             cubes: strip(cubes),
@@ -35730,6 +35753,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
             reports: strip(reports),
             roles: strip(roles),
             rules: strip(rules),
+            notifications: strip(notifications),
             policies: strip(policies),
             states: strip(states),
             types: strip(types),
@@ -35743,7 +35767,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         this._ref.execute(model).subscribe({
             next: () => {
                 this._ps.toast('ChangesSaved');
-                apply(policies, actions, cubes, folders, forms, guides, reports, roles, rules, states, types, utilities, views, widgets);
+                apply(policies, actions, cubes, folders, forms, guides, reports, roles, notifications, rules, states, types, utilities, views, widgets);
                 this.saving = false;
                 this.dirty = false;
                 this._session.refresh().subscribe();
@@ -36976,6 +37000,7 @@ class SystemModule {
         registerComponents(DESINER_COMPONENTS);
         TranslateService.set({
             en: {
+                Notifications: 'Notifications',
                 Variables: 'Variables',
                 Categories: 'Categories',
                 Families: 'Families',
@@ -37355,7 +37380,7 @@ class SystemModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: SystemModule, declarations: [
             /** design */
             FormInviteDialog, PerformanceReportDesignComponent, NodeDesignerComponent, DesignerPrivilegesComponent, AddContentDirective, IconPickerComponent, CustomContentDirective, EditContentDirective, WidgetContentDirective,
-            DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
+            DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, NotificationDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
             CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
             LocalizedStringField,
             /** utilities */
@@ -37368,7 +37393,6 @@ class SystemModule {
             PositionsComponent, PositionsPopup,
             WorkflowComponent, WorkflowNodeComponent, RoleNodeComponent,
             PatternsComponent], imports: [CommonModule,
-            HttpClientModule,
             ReactiveFormsModule,
             RouterModule,
             ScrollingModule,
@@ -37385,7 +37409,6 @@ class SystemModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SystemModule, providers: [
             FormResolve, SystemService
         ], imports: [CommonModule,
-            HttpClientModule,
             ReactiveFormsModule,
             RouterModule,
             ScrollingModule,
@@ -37400,7 +37423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     declarations: [
                         /** design */
                         FormInviteDialog, PerformanceReportDesignComponent, NodeDesignerComponent, DesignerPrivilegesComponent, AddContentDirective, IconPickerComponent, CustomContentDirective, EditContentDirective, WidgetContentDirective,
-                        DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
+                        DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, NotificationDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
                         CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
                         LocalizedStringField,
                         /** utilities */
@@ -37419,7 +37442,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        HttpClientModule,
                         ReactiveFormsModule,
                         RouterModule,
                         ScrollingModule,