@bizdoc/core 2.3.34 → 2.3.35

package/fesm2022/bizdoc-core.mjs

@@ -7,6 +7,7 @@ import { MatChipInput, MatChipsModule, MatChipListbox } from '@angular/material/
 import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';
 import * as i3$3 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
+import { style, animate, transition, trigger, state, animateChild, stagger, query, keyframes } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayRef, OverlayModule, CdkScrollable } from '@angular/cdk/overlay';
 import * as i1$2 from '@angular/forms';
@@ -55,7 +56,6 @@ import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import * as i3$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule, MatSlideToggle } from '@angular/material/slide-toggle';
-import { style, animate, transition, trigger, state, animateChild, stagger, query, keyframes } from '@angular/animations';
 import * as i1$3 from '@angular/cdk/bidi';
 import { __decorate } from 'tslib';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
@@ -712,6 +712,170 @@ function getParameterByName(name, url = window.location.href) {
     return decodeURIComponent(results[2].replace(/\+/g, ' '));
 }
 
+const noneAnimation = trigger('none', [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(10px)' }),
+        animate('400ms ease', style({ opacity: .2, transform: 'translateX(0)' }))
+    ])
+]);
+const expandListItemAnimation = trigger('detailExpand', [
+    state('collapsed', style({ height: '0px', minHeight: '0', display: '' })),
+    state('expanded', style({ height: '*', minHeight: '50px', display: '' })),
+    transition('expanded => collapsed', animate('1s cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    transition('collapsed => expanded', animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+]);
+const listItemUpdatedAnimation = trigger('updated', [state('true', style({ opacity: 1, /*background: 'white'*/ })),
+    transition('*=>true', animate('300ms ease-in', style({ opacity: 0, /*background: 'darkgray'*/ })))]);
+const searchAnimation = trigger('search', [state('false', style({ width: 0, padding: 0, borderWidth: 0 })),
+    state('true', style({ width: '300px', padding: '2px 6px', borderWidth: '1px' })),
+    transition('* <=> *', animate(200, style({})))]);
+const deshboardAnimation = trigger('deshboard', [transition('* <=> *', [query('@card', stagger(250, animateChild()), { optional: true })])]);
+const deshboardCardAnimation = trigger('card', [
+    transition(':enter', [
+        style({
+            transform: 'rotateY(180deg)',
+        }),
+        animate(".5s ease", style({
+            transform: 'rotateY(0deg)',
+        }))
+    ])
+]);
+const ShakeAnimation = [
+    style({ transform: 'rotate(0)' }),
+    animate('0.1s', style({ transform: 'rotate(2deg)' })),
+    animate('0.1s', style({ transform: 'rotate(-2deg)' })),
+    animate('0.1s', style({ transform: 'rotate(2deg)' })),
+    animate('0.1s', style({ transform: 'rotate(0)' })),
+];
+const EnterExitLeft = [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(-200px)' }),
+        animate('300ms ease-in', style({ opacity: 1, transform: 'translateX(0)' })),
+    ]),
+    transition(':leave', [
+        animate('300ms ease-in', style({ opacity: 0, transform: 'translateX(-200px)' }))
+    ])
+];
+const EnterExitRight = [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(200px)' }),
+        animate('300ms ease-in', style({ opacity: 1, transform: 'translateX(0)' })),
+    ]),
+    transition(':leave', [
+        animate('300ms ease-in', style({ opacity: 0, transform: 'translateX(200px)' }))
+    ])
+];
+const EnterExitTop = [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(-200px)' }),
+        animate('300ms ease-in', style({ opacity: 1, transform: 'translateY(0)' })),
+    ]),
+    transition(':leave', [
+        animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(200px)' }))
+    ])
+];
+const FadeSlideInOut = [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(10px)' }),
+        animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
+    ]),
+    transition(':leave', [
+        animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
+    ]),
+];
+const PulseAnimation = animate('1s', keyframes([
+    style({ opacity: 0.1, offset: 0.1 }),
+    style({ opacity: 0.6, offset: 0.2 }),
+    style({ opacity: 1, offset: 0.5 }),
+    style({ opacity: 0.2, offset: 0.7 })
+]));
+const SwapAnimation = [
+    transition(':increment', [style({ transform: 'translateX(100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))]),
+    transition(':decrement', [style({ transform: 'translateX(-100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))])
+];
+const VerticalSwapAnimation = [
+    transition(':increment', [style({ transform: 'translateY(50px)' }), animate('200ms', style({ transform: 'translateY(0)' }))]),
+    transition(':decrement', [style({ transform: 'translateY(-50px)' }), animate('200ms', style({ transform: 'translateY(0)' }))])
+];
+const matrixAnimation = trigger('table', [transition('void=>*', [
+        query('.mat-mdc-row', [
+            style({ opacity: 0, transform: 'translateX(10px)' }),
+            stagger(100, style({ opacity: 1, transform: 'none' }))
+        ], { optional: true })
+    ])]);
+const swapAnimation = trigger('swape', SwapAnimation);
+const verticalSwapAnimation = trigger('v-swape', VerticalSwapAnimation);
+const pageAnimation = trigger('page', [
+    state(':enter', style({ transform: 'translateX(0)' })),
+    state(':leave', style({ transform: 'translateX(-50%)' })),
+    transition('* => *', animate(300))
+]);
+const fabAnimation = trigger('fabFull', [
+    //state('working', style({ height: '100%', width: '100%' })),
+    //query('mat-icon', style({ 'font-size': '200px' }))
+    transition('* <=> working', [animate('350ms')])
+]);
+const submenuAnimation = trigger('submenu', [
+    state('full', style({ minWidth: '200px', width: '*' })),
+    state('shrink', style({ minWidth: '60px', width: '60px' })),
+    transition('full<=>shrink, void=>shrink', [animate('100ms ease-out')]),
+    transition(':enter', [
+        style({ width: 0 }),
+        animate('200ms ease-in', style({ minWidth: '200px', width: '*' })),
+    ]),
+    transition(':leave', [
+        animate('200ms ease-out', style({ minWidth: 0, width: 0 }))
+    ])
+]);
+const listAnimation = trigger('list', [
+//  transition('* <=> *', [
+//    query('@item',
+//      stagger(50, animateChild()), { optional: true }
+//    )
+//  ])
+]);
+const itemAnimation = trigger('item', [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(100px)' }),
+        animate("200ms ease-out", style({ opacity: 1, transform: 'none' }))
+    ])
+]);
+const tabsAnimation = trigger('tabs', [
+    //transition(':enter', [
+    //  style({ width: 0 }),
+    //  animate(
+    //    '250ms ease-out',
+    //    style({ minWidth: '200px', width: '*' })
+    //  ),
+    //]),
+    transition(':leave', [
+        animate('200ms ease-out', style({ minWidth: 0, width: 0 }))
+    ]),
+    transition('* <=> *', [style({ width: '{{startWidth}}px' }), animate('.5s ease')], { params: { startWidth: 0 } })
+]);
+const tabAnimation = trigger('tab', SwapAnimation);
+const panesAnimation = trigger('panes', [transition(':enter, :leave', [
+        query('@pane', stagger(150, animateChild()), { optional: true }),
+    ])]);
+const panesTitleAnimation = trigger('title', [
+    transition(':leave', [
+        query('h1', animate('500ms', style({ opacity: 0, transform: 'translateX(10px)' }))),
+    ]),
+    transition('*<=>*', [
+        query('h1', [style({ opacity: 0, transform: 'translateX(10px)' }),
+            animate('500ms', style({ opacity: 1, transform: 'translateX(0)' }))]),
+    ])
+]);
+const paneAnimation = trigger('pane', [
+//transition(':enter', [style({ opacity: 0, transform: 'translateX(100%)' }),
+//  animate('500ms', style({ opacity: 1, transform: 'translateX(0)' }))]),
+//transition(':leave', [animate('500ms', style({ opacity: 0, transform: 'translateX(10px)' }))])
+]);
+const paramAnimation = trigger('param', [state('*', style({ backgroundColor: 'unset', transform: 'scale(1)' })),
+    transition('*<=>*', animate(200, style({ backgroundColor: 'unset', transform: 'scale(1)' })))]);
+const queryAnimation = trigger('query', [state('*', style({})),
+    transition('*<=>*', animate(0, style({})))]);
+
 class AuthenticationImpl {
 }
 
@@ -1003,7 +1167,7 @@ const STRINGS = {
         Preferences: 'Settings',
         Tags: 'Tags',
         Mention: 'Mention',
-        TagsHint: 'Choose or type new tags',
+        TagsHint: 'Choose or type tags',
         ContinueEditing: 'Continue editing',
         Close: 'Close',
         View: 'View',
@@ -1110,9 +1274,10 @@ const STRINGS = {
         DeleteFileAsk: 'Are you sure you want to delete this attachment?',
         DeleteCommentAsk: 'Are you sure you want to delete this comment?',
         GrantAccess: 'Grant Access',
-        GrantTip: 'Who may view and take actions on your behalf.',
+        GrantTip: 'User(s) may view and take actions on your behalf.',
         OutOfOfficeTip: 'Redirect mail to another user on your absence.',
         Timeline: 'Timeline',
+        Theme: 'Theme',
         Back: 'Back',
         Active: 'Active',
         MyStateChange: 'As my document\'s state changes',
@@ -1202,7 +1367,6 @@ const STRINGS = {
         Discard: 'Discard',
         DiscardAsk: 'Are you sure you want to permenently discard this document?',
         DiscardSelected: 'Discard {0} item(s)',
-        TypeHere: 'Type here',
         ChatHere: 'Chat here',
         CommentHere: 'Comment here',
         DraftSaved: 'Draft saved',
@@ -1255,6 +1419,7 @@ const STRINGS = {
         DownloadExcel: 'Excel',
         Users: 'Users',
         Associate: 'Type associate name',
+        Associates: 'Associates',
         Who: 'Who',
         Task: 'Task',
         When: 'When',
@@ -1351,6 +1516,7 @@ const STRINGS = {
         MaxLengthErr: 'Maximum <strong>{0}</strong> length',
     },
     'he': {
+        Theme: 'תבנית עיצוב',
         AltSHelp: 'מצא/י בתקיה / חיפוש כללי',
         CtrlSHelp: 'שמירת טופס במצב עריכה',
         AltNHelp: 'מילוי טופס חדש',
@@ -1656,6 +1822,7 @@ const STRINGS = {
         To: 'עד',
         Users: 'משתמשים',
         Associate: 'הקלד/י שם משתמש',
+        Associates: 'עמיתים',
         AssociateFemale: 'הקלדי שם משתמש',
         AssociateMale: 'הקלד שם משתמש',
         Active: 'פעיל',
@@ -1755,11 +1922,10 @@ const STRINGS = {
         Compare: 'גרסה',
         Notifications: 'התראות',
         NoNotifications: 'אין התראות',
-        TypeHere: 'כתוב/י כאן',
-        TypeHereMale: 'כתוב כאן',
-        TypeHereFemale: 'כתבי כאן',
+        CommentHere: 'הער/י כאן',
+        CommentHereMale: 'הער כאן',
+        CommentHereFemale: 'הערי כאן',
         ChatHere: 'כתוב/י צ\'אט',
-        CommentHere: 'כתוב/י הערה',
         Collapse: 'סגירה',
         Flagged: 'חשוב',
         Back: 'חזרה',
@@ -2771,6 +2937,7 @@ class OptionsComponent {
         this._accounts = _accounts;
         this._sb = _sb;
         this._session = _session;
+        this.sectionIndex = 0;
         this.saveing = false;
         this._requiredValidator = (control) => {
             const parent = control.parent;
@@ -2779,8 +2946,8 @@ class OptionsComponent {
                     required: true
                 };
         };
-        this.gusers = this._fb.control([]);
-        this.substitueId = this._fb.control(null);
+        this.grantUserIds = this._fb.control([]);
+        this.oooId = this._fb.control(null);
         this.form = this._fb.group({
             notifications: this._fb.group({
                 active: this._fb.control(false),
@@ -2813,9 +2980,9 @@ class OptionsComponent {
                 users: this._fb.control(null, this._requiredValidator)
             })
         });
-        this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
         this.today = new Date();
         this.isMobile = isMobile();
+        this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
         /** options ctor */
         this._destroy = new Subject();
         this.display = (item) => {
@@ -2839,9 +3006,9 @@ class OptionsComponent {
         if (!this.options.emails.active)
             this._toggle(emails, false, 'mail', 'chat', 'notifications', 'events');
         if (!this.options.grantAccess.active)
-            this.gusers.disable();
+            this.grantUserIds.disable();
         if (!this.options.outOfOffice.active) {
-            this.substitueId.disable();
+            this.oooId.disable();
             this._toggle(outOfOffice, false, 'from', 'to');
         }
         else if (!this.options.outOfOffice.from)
@@ -2854,47 +3021,50 @@ class OptionsComponent {
         grantAccess.controls.active.valueChanges.pipe(takeUntil(this._destroy)).
             subscribe(active => {
             if (active) {
-                this.gusers.enable();
+                this.grantUserIds.enable();
                 this.grantInput.focus();
             }
             else
-                this.gusers.enable();
+                this.grantUserIds.enable();
         });
         outOfOffice.controls.active.valueChanges.pipe(takeUntil(this._destroy)).
             subscribe(active => {
             if (active) {
-                this.substitueId.enable();
+                this.oooId.enable();
                 this.substitueInput.focus();
             }
             else
-                this.substitueId.disable();
+                this.oooId.disable();
             this._toggle(outOfOffice, active, 'from');
             this._toggle(outOfOffice, active && outOfOffice.controls.from.value, 'to');
         });
         outOfOffice.controls.from.valueChanges.pipe(takeUntil(this._destroy)).
             subscribe(from => this._toggle(outOfOffice, from !== null, 'to'));
-        this.gusers$ = this.gusers.valueChanges.pipe(takeUntil(this._destroy), filter(v => isString(v)), debounceTime(100), switchMap(v => this._accounts.findAll(v)), map(r => {
+        this.gusers$ = this.grantUserIds.valueChanges.pipe(takeUntil(this._destroy), filter(v => isString(v)), debounceTime(100), switchMap(v => this._accounts.findAll(v)), map(r => {
             const exclude = grantAccess.value.users?.slice() || [];
             exclude.push(this._session.profile.userId);
             return r.filter(u => exclude.indexOf(u.id) < 0);
         }));
-        this.susers$ = this.substitueId.valueChanges.pipe(takeUntil(this._destroy), tap(v => !v && outOfOffice.controls.substitueId.setValue(null)), filter(v => isString(v)), switchMap(v => this._accounts.findAll(v)), map(r => r.filter(u => u.id !== this._session.profile.userId)));
+        this.susers$ = this.oooId.valueChanges.pipe(takeUntil(this._destroy), tap(v => !v && outOfOffice.controls.substitueId.setValue(null)), filter(v => isString(v)), switchMap(v => this._accounts.findAll(v)), map(r => r.filter(u => u.id !== this._session.profile.userId)));
         if (this.options.outOfOffice.substitueId)
-            this._accounts.get(this.options.outOfOffice.substitueId).subscribe(u => this.substitueId.setValue(u, { emitEvent: false }));
+            this._accounts.get(this.options.outOfOffice.substitueId).subscribe(u => this.oooId.setValue(u, { emitEvent: false }));
         // auto save
         this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(400)).subscribe(() => this.form.valid && this.save());
         switch (this.sectionName) {
             case 'out_of_office':
                 this.sectionTmpl = this.oooTmpl;
+                this.sectionIndex = 2;
                 break;
             case 'notifications':
                 this.sectionTmpl = this.notificationsTmpl;
+                this.sectionIndex = 0;
                 break;
         }
     }
-    nav(sectionName, template) {
+    nav(sectionName, template, index) {
         this.sectionName = sectionName;
         this.sectionTmpl = template;
+        this.sectionIndex = index;
     }
     save() {
         this.saveing = true;
@@ -2964,11 +3134,11 @@ class OptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: OptionsComponent, deps: [{ token: OPTION_PANEL, optional: true }, { token: i1$1.OverlayRef, optional: true }, { token: i1$2.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: SessionService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: OptionsComponent, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, 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=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\"><ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container></form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [placeholder]=\"'Tags'|translate\"\n             [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\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>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <mat-form-field>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUsers\" placeholder=\"{{'Users'| translate}}\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.separator{height:280px;width:1px;background-color:#0003}form{padding:8px;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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: "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.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"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: OptionsComponent, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, 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: "<!--<bizdov-v-tabs [initialName]=\"sectionName\">\n  <tab name=\"notifications\" title=\"Notifications\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n        <div class=\"row\">\n          <span class=\"divider\"></span>\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>\n        </div>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"emails\" title=\"Emails\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.emails\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"out_of_office\" title=\"OutOfOffice\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-form-field class=\"flex\">\n          <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                            (optionSelected)=\"oooSelected($event)\">\n            @for (u of susers$ | async; track u) {\n            <mat-option [value]=\"u\">\n              <span>{{u.name}}</span>\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{'Dates'|translate}}</mat-label>\n          <mat-date-range-input [rangePicker]=\"dates\">\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n          </mat-date-range-input>\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"grant_access\" title=\"GrantAccess\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <mat-form-field>\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n            @for (u of form.value.grantAccess.users || []; track u) {\n            <mat-chip-row (removed)=\"removeGrant(u)\">\n              {{u | userName | async}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [formControl]=\"grantUsers\" placeholder=\"{{'Users'| translate}}\"\n                 #grantInput\n                 [matAutocomplete]=\"grantAuto\"\n                 [matChipInputFor]=\"grantList\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n            @for (u of gusers$ | async; track u) {\n            <mat-option [value]=\"u.id\">\n              {{u.name}}\n              @if (u.email) {\n              <span>&nbsp; - {{u.email}}</span>\n              }\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"preferences\" title=\"Preferences\">\n    <ng-template>\n      <div class=\"column\">\n        <mat-form-field>\n          <mat-chip-grid #chips>\n            @for (item of form.value.tags; track item) {\n            <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n              {{item}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [placeholder]=\"'Tags'|translate\"\n                 [matChipInputFor]=\"chips\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                 [matChipInputAddOnBlur]=\"true\"\n                 (matChipInputTokenEnd)=\"addTag($event)\">\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n</bizdov-v-tabs>-->\n<div class=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\n    <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\n  </form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [placeholder]=\"'Tags'|translate\"\n             [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\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>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <mat-form-field>\n      <mat-label>{{'Associates'| translate}}</mat-label>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUserIds\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u.id) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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: "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.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"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-options', template: "<div class=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\"><ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container></form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [placeholder]=\"'Tags'|translate\"\n             [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\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>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <mat-form-field>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUsers\" placeholder=\"{{'Users'| translate}}\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.separator{height:280px;width:1px;background-color:#0003}form{padding:8px;min-width:320px}\n"] }]
+            args: [{ selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<!--<bizdov-v-tabs [initialName]=\"sectionName\">\n  <tab name=\"notifications\" title=\"Notifications\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n        <div class=\"row\">\n          <span class=\"divider\"></span>\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>\n        </div>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"emails\" title=\"Emails\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.emails\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"out_of_office\" title=\"OutOfOffice\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-form-field class=\"flex\">\n          <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                            (optionSelected)=\"oooSelected($event)\">\n            @for (u of susers$ | async; track u) {\n            <mat-option [value]=\"u\">\n              <span>{{u.name}}</span>\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{'Dates'|translate}}</mat-label>\n          <mat-date-range-input [rangePicker]=\"dates\">\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n          </mat-date-range-input>\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"grant_access\" title=\"GrantAccess\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <mat-form-field>\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n            @for (u of form.value.grantAccess.users || []; track u) {\n            <mat-chip-row (removed)=\"removeGrant(u)\">\n              {{u | userName | async}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [formControl]=\"grantUsers\" placeholder=\"{{'Users'| translate}}\"\n                 #grantInput\n                 [matAutocomplete]=\"grantAuto\"\n                 [matChipInputFor]=\"grantList\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n            @for (u of gusers$ | async; track u) {\n            <mat-option [value]=\"u.id\">\n              {{u.name}}\n              @if (u.email) {\n              <span>&nbsp; - {{u.email}}</span>\n              }\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"preferences\" title=\"Preferences\">\n    <ng-template>\n      <div class=\"column\">\n        <mat-form-field>\n          <mat-chip-grid #chips>\n            @for (item of form.value.tags; track item) {\n            <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n              {{item}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [placeholder]=\"'Tags'|translate\"\n                 [matChipInputFor]=\"chips\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                 [matChipInputAddOnBlur]=\"true\"\n                 (matChipInputTokenEnd)=\"addTag($event)\">\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n</bizdov-v-tabs>-->\n<div class=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\n    <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\n  </form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [placeholder]=\"'Tags'|translate\"\n             [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\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>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <mat-form-field>\n      <mat-label>{{'Associates'| translate}}</mat-label>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUserIds\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u.id) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [OPTION_PANEL]
@@ -3004,165 +3174,6 @@ class NodeRef {
     get arguments() { return this._node.arguments; }
 }
 
-const noneAnimation = trigger('none', [
-    transition(':enter', [
-        style({ opacity: 0, transform: 'translateX(10px)' }),
-        animate('400ms ease', style({ opacity: .2, transform: 'translateX(0)' }))
-    ])
-]);
-const expandListItemAnimation = trigger('detailExpand', [
-    state('collapsed', style({ height: '0px', minHeight: '0', display: '' })),
-    state('expanded', style({ height: '*', minHeight: '50px', display: '' })),
-    transition('expanded => collapsed', animate('1s cubic-bezier(0.4, 0.0, 0.2, 1)')),
-    transition('collapsed => expanded', animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
-]);
-const listItemUpdatedAnimation = trigger('updated', [state('true', style({ opacity: 1, /*background: 'white'*/ })),
-    transition('*=>true', animate('300ms ease-in', style({ opacity: 0, /*background: 'darkgray'*/ })))]);
-const searchAnimation = trigger('search', [state('false', style({ width: 0, padding: 0, borderWidth: 0 })),
-    state('true', style({ width: '300px', padding: '2px 6px', borderWidth: '1px' })),
-    transition('* <=> *', animate(200, style({})))]);
-const deshboardAnimation = trigger('deshboard', [transition('* <=> *', [query('@card', stagger(250, animateChild()), { optional: true })])]);
-const deshboardCardAnimation = trigger('card', [
-    transition(':enter', [
-        style({
-            transform: 'rotateY(180deg)',
-        }),
-        animate(".5s ease", style({
-            transform: 'rotateY(0deg)',
-        }))
-    ])
-]);
-const ShakeAnimation = [
-    style({ transform: 'rotate(0)' }),
-    animate('0.1s', style({ transform: 'rotate(2deg)' })),
-    animate('0.1s', style({ transform: 'rotate(-2deg)' })),
-    animate('0.1s', style({ transform: 'rotate(2deg)' })),
-    animate('0.1s', style({ transform: 'rotate(0)' })),
-];
-const EnterExitLeft = [
-    transition(':enter', [
-        style({ opacity: 0, transform: 'translateX(-200px)' }),
-        animate('300ms ease-in', style({ opacity: 1, transform: 'translateX(0)' })),
-    ]),
-    transition(':leave', [
-        animate('300ms ease-in', style({ opacity: 0, transform: 'translateX(-200px)' }))
-    ])
-];
-const EnterExitRight = [
-    transition(':enter', [
-        style({ opacity: 0, transform: 'translateX(200px)' }),
-        animate('300ms ease-in', style({ opacity: 1, transform: 'translateX(0)' })),
-    ]),
-    transition(':leave', [
-        animate('300ms ease-in', style({ opacity: 0, transform: 'translateX(200px)' }))
-    ])
-];
-const EnterExitTop = [
-    transition(':enter', [
-        style({ opacity: 0, transform: 'translateY(-200px)' }),
-        animate('300ms ease-in', style({ opacity: 1, transform: 'translateY(0)' })),
-    ]),
-    transition(':leave', [
-        animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(200px)' }))
-    ])
-];
-const FadeSlideInOut = [
-    transition(':enter', [
-        style({ opacity: 0, transform: 'translateY(10px)' }),
-        animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
-    ]),
-    transition(':leave', [
-        animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
-    ]),
-];
-const PulseAnimation = animate('1s', keyframes([
-    style({ opacity: 0.1, offset: 0.1 }),
-    style({ opacity: 0.6, offset: 0.2 }),
-    style({ opacity: 1, offset: 0.5 }),
-    style({ opacity: 0.2, offset: 0.7 })
-]));
-const SwapAnimation = [
-    transition(':increment', [style({ transform: 'translateX(100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))]),
-    transition(':decrement', [style({ transform: 'translateX(-100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))])
-];
-const matrixAnimation = trigger('table', [transition('void=>*', [
-        query('.mat-mdc-row', [
-            style({ opacity: 0, transform: 'translateX(10px)' }),
-            stagger(100, style({ opacity: 1, transform: 'none' }))
-        ], { optional: true })
-    ])]);
-const swapAnimation = trigger('swape', SwapAnimation);
-const pageAnimation = trigger('page', [
-    state(':enter', style({ transform: 'translateX(0)' })),
-    state(':leave', style({ transform: 'translateX(-50%)' })),
-    transition('* => *', animate(300))
-]);
-const fabAnimation = trigger('fabFull', [
-    //state('working', style({ height: '100%', width: '100%' })),
-    //query('mat-icon', style({ 'font-size': '200px' }))
-    transition('* <=> working', [animate('350ms')])
-]);
-const submenuAnimation = trigger('submenu', [
-    state('full', style({ minWidth: '200px', width: '*' })),
-    state('shrink', style({ minWidth: '60px', width: '60px' })),
-    transition('full<=>shrink, void=>shrink', [animate('100ms ease-out')]),
-    transition(':enter', [
-        style({ width: 0 }),
-        animate('200ms ease-in', style({ minWidth: '200px', width: '*' })),
-    ]),
-    transition(':leave', [
-        animate('200ms ease-out', style({ minWidth: 0, width: 0 }))
-    ])
-]);
-const listAnimation = trigger('list', [
-//  transition('* <=> *', [
-//    query('@item',
-//      stagger(50, animateChild()), { optional: true }
-//    )
-//  ])
-]);
-const itemAnimation = trigger('item', [
-    transition(':enter', [
-        style({ opacity: 0, transform: 'translateX(100px)' }),
-        animate("200ms ease-out", style({ opacity: 1, transform: 'none' }))
-    ])
-]);
-const tabsAnimation = trigger('tabs', [
-    //transition(':enter', [
-    //  style({ width: 0 }),
-    //  animate(
-    //    '250ms ease-out',
-    //    style({ minWidth: '200px', width: '*' })
-    //  ),
-    //]),
-    transition(':leave', [
-        animate('200ms ease-out', style({ minWidth: 0, width: 0 }))
-    ]),
-    transition('* <=> *', [style({ width: '{{startWidth}}px' }), animate('.5s ease')], { params: { startWidth: 0 } })
-]);
-const tabAnimation = trigger('tab', SwapAnimation);
-const panesAnimation = trigger('panes', [transition(':enter, :leave', [
-        query('@pane', stagger(150, animateChild()), { optional: true }),
-    ])]);
-const panesTitleAnimation = trigger('title', [
-    transition(':leave', [
-        query('h1', animate('500ms', style({ opacity: 0, transform: 'translateX(10px)' }))),
-    ]),
-    transition('*<=>*', [
-        query('h1', [style({ opacity: 0, transform: 'translateX(10px)' }),
-            animate('500ms', style({ opacity: 1, transform: 'translateX(0)' }))]),
-    ])
-]);
-const paneAnimation = trigger('pane', [
-//transition(':enter', [style({ opacity: 0, transform: 'translateX(100%)' }),
-//  animate('500ms', style({ opacity: 1, transform: 'translateX(0)' }))]),
-//transition(':leave', [animate('500ms', style({ opacity: 0, transform: 'translateX(10px)' }))])
-]);
-const paramAnimation = trigger('param', [state('*', style({ backgroundColor: 'unset', transform: 'scale(1)' })),
-    transition('*<=>*', animate(200, style({ backgroundColor: 'unset', transform: 'scale(1)' })))]);
-const queryAnimation = trigger('query', [state('*', style({})),
-    transition('*<=>*', animate(0, style({})))]);
-
 class SanitizeHtmlPipe {
     constructor(_sanitizer) {
         this._sanitizer = _sanitizer;
@@ -7928,7 +7939,7 @@ class ChatInfo {
         else if (this._isMobile)
             this._open$.next(contact.id);
         else if (!options || options.mode === 'room')
-            this._router.navigate(['chatroom', contact.id], {
+            this._router.navigate(['chat', contact.id], {
             // group: options ? options.group : null
             });
         else {
@@ -9396,11 +9407,11 @@ class TagsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TagsComponent, deps: [{ token: POPUP_DATA }, { token: MailboxService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TagsComponent, selector: "ng-component", viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field floatLabel=\"never\">\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\n    @for (item of tags; track item) {\n      <mat-chip\n        [removable]=\"true\" (removed)=\"remove(item)\">\n        {{item}}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-grid>\n  <input [placeholder]=\"'TagsHint'|translate\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputFor]=\"chipList\"\n    [formControl]=\"control\"\n    #input autocomplete=\"off\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    [matChipInputAddOnBlur]=\"true\"\n    (matChipInputTokenEnd)=\"add($event)\">\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n      @for (item of options | async; track item) {\n        <mat-option [value]=\"item\">\n          {{item}}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { 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$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: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TagsComponent, selector: "ng-component", viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\n    @for (item of tags; track item) {\n      <mat-chip\n        [removable]=\"true\" (removed)=\"remove(item)\">\n        {{item}}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-grid>\n  <input [placeholder]=\"'TagsHint'|translate\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputFor]=\"chipList\"\n    [formControl]=\"control\"\n    #input autocomplete=\"off\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    [matChipInputAddOnBlur]=\"true\"\n    (matChipInputTokenEnd)=\"add($event)\">\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n      @for (item of options | async; track item) {\n        <mat-option [value]=\"item\">\n          {{item}}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { 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$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: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-form-field floatLabel=\"never\">\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\n    @for (item of tags; track item) {\n      <mat-chip\n        [removable]=\"true\" (removed)=\"remove(item)\">\n        {{item}}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-grid>\n  <input [placeholder]=\"'TagsHint'|translate\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputFor]=\"chipList\"\n    [formControl]=\"control\"\n    #input autocomplete=\"off\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    [matChipInputAddOnBlur]=\"true\"\n    (matChipInputTokenEnd)=\"add($event)\">\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n      @for (item of options | async; track item) {\n        <mat-option [value]=\"item\">\n          {{item}}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n", styles: [":host{padding:8px}\n"] }]
+            args: [{ template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\n    @for (item of tags; track item) {\n      <mat-chip\n        [removable]=\"true\" (removed)=\"remove(item)\">\n        {{item}}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-grid>\n  <input [placeholder]=\"'TagsHint'|translate\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputFor]=\"chipList\"\n    [formControl]=\"control\"\n    #input autocomplete=\"off\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    [matChipInputAddOnBlur]=\"true\"\n    (matChipInputTokenEnd)=\"add($event)\">\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n      @for (item of options | async; track item) {\n        <mat-option [value]=\"item\">\n          {{item}}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n", styles: [":host{padding:8px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POPUP_DATA]
@@ -10008,13 +10019,11 @@ class ComposePaneComponent {
         this._navigate('views');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", 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: "17.2.1", type: ComposePaneComponent, 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)" }, classAttribute: "pane" }, 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\">\n  @if (form.page !== undefined) {\n    <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\n    </button>\n  }\n  @if (model.draft) {\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\n      (click)=\"submit()\" [disabled]=\"!valid||working\">\n      <span>{{'Submit' | translate}}</span>\n    </button>\n  }\n  @if (form.actions.length === 1) {\n    <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\n      <span>{{form.actions[0].title}}</span>\n    </button>\n  }\n  @else if (form.actions.length > 1) {\n    <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\n      <span>{{'Send' | translate}}</span>\n    </button>\n  }\n  <!-- action -->\n  <mat-menu #actionMenu>\n    <ng-template matMenuContent>\n      @for (a of form.actions; track a; let i = $index) {\n        @if (i > 0 && form.actions[i - 1].group !== a.group) {\n          <mat-divider></mat-divider>\n        }\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\n      }\n    </ng-template>\n  </mat-menu>\n  @if (mode === 'compose') {\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\n      <mat-icon>save</mat-icon>\n    </button>\n  }\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':'bookmark_border'}}</mat-icon></button>\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\n  @if (mode !== 'compose' && model.pending && !model.completed) {\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\n  }\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\n  </button>\n  @if (enableAnalysis) {\n    <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\n  }\n  @if (expendable) {\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\n  }\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\n  <mat-menu #optionsMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\n        <!--<mat-icon>content_copy</mat-icon>-->\n        <span>{{'Copy' | translate}}</span>\n      </button>\n      @if (model.draft && !model.issued) {\n        <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\n          <!--<mat-icon>delete_outlined</mat-icon>-->\n          <span>{{'Discard' | translate}}</span>\n        </button>\n      }\n      @if (form.help) {\n        <mat-divider></mat-divider>\n        <button mat-menu-item (click)=\"form.guide(form.help)\">\n          <!--<mat-icon>help_outline</mat-icon>-->\n          <span>{{'Help' | translate}}</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\n    </ng-template>\n  </mat-menu>\n</mat-toolbar>\n<div class=\"file-dropable flex\" #dropable>\n  <bizdoc-form [model]=model #form\n    (modelChange)=\"change()\"\n    (saved)=\"saved()\"\n    (validChange)=\"valid=$event\"\n    (workingChange)=\"working=$event\"\n  (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i5$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$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", "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: "17.2.1", type: ComposePaneComponent, 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\">\n  @if (form.page !== undefined) {\n    <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\n    </button>\n  }\n  @if (model.draft) {\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\n      (click)=\"submit()\" [disabled]=\"!valid||working\">\n      <span>{{'Submit' | translate}}</span>\n    </button>\n  }\n  @if (form.actions.length === 1) {\n    <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\n      <span>{{form.actions[0].title}}</span>\n    </button>\n  }\n  @else if (form.actions.length > 1) {\n    <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\n      <span>{{'Send' | translate}}</span>\n    </button>\n  }\n  <!-- action -->\n  <mat-menu #actionMenu>\n    <ng-template matMenuContent>\n      @for (a of form.actions; track a; let i = $index) {\n        @if (i > 0 && form.actions[i - 1].group !== a.group) {\n          <mat-divider></mat-divider>\n        }\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\n      }\n    </ng-template>\n  </mat-menu>\n  @if (mode === 'compose') {\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\n      <mat-icon>save</mat-icon>\n    </button>\n  }\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':'bookmark_border'}}</mat-icon></button>\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\n  @if (mode !== 'compose' && model.pending && !model.completed) {\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\n  }\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\n  </button>\n  @if (enableAnalysis) {\n    <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\n  }\n  @if (expendable) {\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\n  }\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\n  <mat-menu #optionsMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\n        <!--<mat-icon>content_copy</mat-icon>-->\n        <span>{{'Copy' | translate}}</span>\n      </button>\n      @if (model.draft && !model.issued) {\n        <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\n          <!--<mat-icon>delete_outlined</mat-icon>-->\n          <span>{{'Discard' | translate}}</span>\n        </button>\n      }\n      @if (form.help) {\n        <mat-divider></mat-divider>\n        <button mat-menu-item (click)=\"form.guide(form.help)\">\n          <!--<mat-icon>help_outline</mat-icon>-->\n          <span>{{'Help' | translate}}</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\n    </ng-template>\n  </mat-menu>\n</mat-toolbar>\n<div class=\"file-dropable flex\" #dropable>\n  <bizdoc-form [model]=model #form\n    (modelChange)=\"change()\"\n    (saved)=\"saved()\"\n    (validChange)=\"valid=$event\"\n    (workingChange)=\"working=$event\"\n  (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i5$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$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", "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: "17.2.1", ngImport: i0, type: ComposePaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-compose.pane', host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (form.page !== undefined) {\n    <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\n    </button>\n  }\n  @if (model.draft) {\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\n      (click)=\"submit()\" [disabled]=\"!valid||working\">\n      <span>{{'Submit' | translate}}</span>\n    </button>\n  }\n  @if (form.actions.length === 1) {\n    <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\n      <span>{{form.actions[0].title}}</span>\n    </button>\n  }\n  @else if (form.actions.length > 1) {\n    <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\n      <span>{{'Send' | translate}}</span>\n    </button>\n  }\n  <!-- action -->\n  <mat-menu #actionMenu>\n    <ng-template matMenuContent>\n      @for (a of form.actions; track a; let i = $index) {\n        @if (i > 0 && form.actions[i - 1].group !== a.group) {\n          <mat-divider></mat-divider>\n        }\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\n      }\n    </ng-template>\n  </mat-menu>\n  @if (mode === 'compose') {\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\n      <mat-icon>save</mat-icon>\n    </button>\n  }\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':'bookmark_border'}}</mat-icon></button>\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\n  @if (mode !== 'compose' && model.pending && !model.completed) {\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\n  }\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\n  </button>\n  @if (enableAnalysis) {\n    <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\n  }\n  @if (expendable) {\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\n  }\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\n  <mat-menu #optionsMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\n        <!--<mat-icon>content_copy</mat-icon>-->\n        <span>{{'Copy' | translate}}</span>\n      </button>\n      @if (model.draft && !model.issued) {\n        <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\n          <!--<mat-icon>delete_outlined</mat-icon>-->\n          <span>{{'Discard' | translate}}</span>\n        </button>\n      }\n      @if (form.help) {\n        <mat-divider></mat-divider>\n        <button mat-menu-item (click)=\"form.guide(form.help)\">\n          <!--<mat-icon>help_outline</mat-icon>-->\n          <span>{{'Help' | translate}}</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\n    </ng-template>\n  </mat-menu>\n</mat-toolbar>\n<div class=\"file-dropable flex\" #dropable>\n  <bizdoc-form [model]=model #form\n    (modelChange)=\"change()\"\n    (saved)=\"saved()\"\n    (validChange)=\"valid=$event\"\n    (workingChange)=\"working=$event\"\n  (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\n</div>\n" }]
+            args: [{ selector: 'bizdoc-compose.pane', template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (form.page !== undefined) {\n    <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\n    </button>\n  }\n  @if (model.draft) {\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\n      (click)=\"submit()\" [disabled]=\"!valid||working\">\n      <span>{{'Submit' | translate}}</span>\n    </button>\n  }\n  @if (form.actions.length === 1) {\n    <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\n      <span>{{form.actions[0].title}}</span>\n    </button>\n  }\n  @else if (form.actions.length > 1) {\n    <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\n      <span>{{'Send' | translate}}</span>\n    </button>\n  }\n  <!-- action -->\n  <mat-menu #actionMenu>\n    <ng-template matMenuContent>\n      @for (a of form.actions; track a; let i = $index) {\n        @if (i > 0 && form.actions[i - 1].group !== a.group) {\n          <mat-divider></mat-divider>\n        }\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\n      }\n    </ng-template>\n  </mat-menu>\n  @if (mode === 'compose') {\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\n      <mat-icon>save</mat-icon>\n    </button>\n  }\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':'bookmark_border'}}</mat-icon></button>\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\n  @if (mode !== 'compose' && model.pending && !model.completed) {\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\n  }\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\n  </button>\n  @if (enableAnalysis) {\n    <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\n  }\n  @if (expendable) {\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\n  }\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\n  <mat-menu #optionsMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\n        <!--<mat-icon>content_copy</mat-icon>-->\n        <span>{{'Copy' | translate}}</span>\n      </button>\n      @if (model.draft && !model.issued) {\n        <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\n          <!--<mat-icon>delete_outlined</mat-icon>-->\n          <span>{{'Discard' | translate}}</span>\n        </button>\n      }\n      @if (form.help) {\n        <mat-divider></mat-divider>\n        <button mat-menu-item (click)=\"form.guide(form.help)\">\n          <!--<mat-icon>help_outline</mat-icon>-->\n          <span>{{'Help' | translate}}</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\n    </ng-template>\n  </mat-menu>\n</mat-toolbar>\n<div class=\"file-dropable flex\" #dropable>\n  <bizdoc-form [model]=model #form\n    (modelChange)=\"change()\"\n    (saved)=\"saved()\"\n    (validChange)=\"valid=$event\"\n    (workingChange)=\"working=$event\"\n  (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: SessionService }, { type: MailboxService }, { type: PaneRef }, { type: PanesRouter }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -10148,13 +10157,11 @@ class BrowsePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BrowsePaneComponent, deps: [{ token: PaneRef }, { token: SessionService }, { token: Popup }, { token: PanesRouter }, { token: i1$3.Directionality }, { token: TranslateService }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: BrowsePaneComponent, selector: "bizdoc-browse.pane", host: { listeners: { "document:keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "search", first: true, predicate: ["searchEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n", styles: [":host{min-width:540px;display:contents!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6$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: "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"], 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: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "view"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [searchAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: BrowsePaneComponent, selector: "bizdoc-browse.pane", host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "search", first: true, predicate: ["searchEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n", styles: [":host{min-width:540px;display:contents!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6$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: "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"], 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: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "view"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [searchAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BrowsePaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-browse.pane', animations: [searchAnimation], host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n", styles: [":host{min-width:540px;display:contents!important}\n"] }]
+            args: [{ selector: 'bizdoc-browse.pane', animations: [searchAnimation], template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n", styles: [":host{min-width:540px;display:contents!important}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: SessionService }, { type: Popup }, { type: PanesRouter }, { type: i1$3.Directionality }, { type: TranslateService }, { type: i2$2.MatDialog }], propDecorators: { items: [{
                 type: ViewChild,
                 args: [BrowseItemsComponent, { static: true }]
@@ -12149,13 +12156,11 @@ class CubeViewPaneComponent extends ViewBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CubeViewPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: Popup }, { token: RouterImpl }, { token: CubeService }, { token: GuideService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CubeViewPaneComponent, selector: "ng-component", host: { listeners: { "window.keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "viewPane", first: true, predicate: CubeViewComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (view.guide) {\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"vp.exportToExcel()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\n  <mat-menu #pmenu>\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"patternChange(p)\">\n        {{p.title}}\n      </button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-view [filters]=\"axes\" #vp\n  (explore)=\"explore($event)\"\n  [cube]=\"cube\"\n  [view]=\"view\"\n[(loading)]=\"loading\"></bizdoc-cube-view>\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["filters", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { 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: "17.2.1", type: CubeViewPaneComponent, selector: "ng-component", host: { listeners: { "window.keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "viewPane", first: true, predicate: CubeViewComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (view.guide) {\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"vp.exportToExcel()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\n  <mat-menu #pmenu>\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"patternChange(p)\">\n        {{p.title}}\n      </button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-view [filters]=\"axes\" #vp\n  (explore)=\"explore($event)\"\n  [cube]=\"cube\"\n  [view]=\"view\"\n[(loading)]=\"loading\"></bizdoc-cube-view>\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["filters", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { 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: "17.2.1", ngImport: i0, type: CubeViewPaneComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (view.guide) {\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"vp.exportToExcel()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\n  <mat-menu #pmenu>\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"patternChange(p)\">\n        {{p.title}}\n      </button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-view [filters]=\"axes\" #vp\n  (explore)=\"explore($event)\"\n  [cube]=\"cube\"\n  [view]=\"view\"\n[(loading)]=\"loading\"></bizdoc-cube-view>\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"] }]
+            args: [{ template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (view.guide) {\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"vp.exportToExcel()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\n  <mat-menu #pmenu>\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"patternChange(p)\">\n        {{p.title}}\n      </button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-view [filters]=\"axes\" #vp\n  (explore)=\"explore($event)\"\n  [cube]=\"cube\"\n  [view]=\"view\"\n[(loading)]=\"loading\"></bizdoc-cube-view>\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: PaneRef }, { type: Popup }, { type: RouterImpl }, { type: CubeService }, { type: GuideService }], propDecorators: { viewPane: [{
                 type: ViewChild,
                 args: [CubeViewComponent, { static: true }]
@@ -12712,11 +12717,11 @@ class EditInputComponent {
         this._image = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditInputComponent, deps: [{ token: Popup }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: { placeholder: "placeholder", text: "text", image: "image", resource: "resource", disabled: "disabled", autofocus: "autofocus", cache: "cache" }, outputs: { change: "change", onOk: "ok", onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "_rte", first: true, predicate: RichTextEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"column\">\n  @switch (mode) {\n    @case ('html') {\n      <ejs-richtexteditor [value]=\"text\"\n        (change)=\"_htmlChange($event)\"\n      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\n    }\n    @default {\n      <mat-form-field floatLabel=\"never\" class=\"flex\">\n        <textarea matInput cdkTextareaAutosize [autofocus]=\"autofocus\"\n          [(bizdocTagging)]=\"resource\"\n          (keydown)=\"_key($event)\"\n          (input)=\"_textChange($event)\"\n          [value]=\"text\"\n          (paste)=\"_paste($event)\"\n          [placeholder]=\"(placeholder || 'TypeHere') | translate\"\n          (focus)=\"onFocus.emit()\"\n          (focusout)=\"onBlur.emit()\"\n        #textArea></textarea>\n      </mat-form-field>\n    }\n  }\n  <div class=\"row nav-toolbar\">\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\n    </button>\n  </div>\n</div>\n@if (_image) {\n  <div>\n    <img [src]=\"'data:image/png;base64,'+ _image\" />\n    <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"], dependencies: [{ kind: "component", type: i2$9.RichTextEditorComponent, selector: "ejs-richtexteditor", inputs: ["autoSaveOnIdle", "backgroundColor", "bulletFormatList", "cssClass", "editorMode", "emojiPickerSettings", "enableAutoUrl", "enableHtmlEncode", "enableHtmlSanitizer", "enablePersistence", "enableResize", "enableRtl", "enableTabKey", "enableXhtml", "enabled", "enterKey", "fileManagerSettings", "floatingToolbarOffset", "fontColor", "fontFamily", "fontSize", "format", "formatPainterSettings", "formatter", "height", "htmlAttributes", "iframeSettings", "inlineMode", "insertAudioSettings", "insertImageSettings", "insertVideoSettings", "keyConfig", "locale", "maxLength", "numberFormatList", "pasteCleanupSettings", "placeholder", "quickToolbarSettings", "readonly", "saveInterval", "shiftEnterKey", "showCharCount", "showTooltip", "tableSettings", "toolbarSettings", "undoRedoSteps", "undoRedoTimer", "value", "valueTemplate", "width"], outputs: ["actionBegin", "actionComplete", "afterImageDelete", "afterMediaDelete", "afterPasteCleanup", "beforeDialogClose", "beforeDialogOpen", "beforeFileUpload", "beforeImageDrop", "beforeImageUpload", "beforePasteCleanup", "beforeQuickToolbarOpen", "beforeSanitizeHtml", "blur", "change", "created", "destroyed", "dialogClose", "dialogOpen", "fileRemoving", "fileSelected", "fileUploadFailed", "fileUploadSuccess", "fileUploading", "focus", "imageRemoving", "imageSelected", "imageUploadFailed", "imageUploadSuccess", "imageUploading", "quickToolbarClose", "quickToolbarOpen", "resizeStart", "resizeStop", "resizing", "toolbarClick", "toolbarStatusUpdate", "updatedToolbarStatus", "valueChange"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TaggingDirective, selector: "[bizdocTagging]", inputs: ["bizdocTagging"], outputs: ["bizdocTaggingChange"] }, { 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: "17.2.1", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: { placeholder: "placeholder", text: "text", image: "image", resource: "resource", disabled: "disabled", autofocus: "autofocus", cache: "cache" }, outputs: { change: "change", onOk: "ok", onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "_rte", first: true, predicate: RichTextEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"column\">\n  @switch (mode) {\n    @case ('html') {\n      <ejs-richtexteditor [value]=\"text\"\n        (change)=\"_htmlChange($event)\"\n      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\n    }\n    @default {\n      <mat-form-field floatLabel=\"never\" class=\"flex\">\n        <textarea matInput cdkTextareaAutosize [autofocus]=\"autofocus\"\n          [(bizdocTagging)]=\"resource\"\n          (keydown)=\"_key($event)\"\n          (input)=\"_textChange($event)\"\n          [value]=\"text\"\n          (paste)=\"_paste($event)\"\n          [placeholder]=\"(placeholder || 'CommentHere') | translate\"\n          (focus)=\"onFocus.emit()\"\n          (focusout)=\"onBlur.emit()\"\n        #textArea></textarea>\n      </mat-form-field>\n    }\n  }\n  <div class=\"row nav-toolbar\">\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\n    </button>\n  </div>\n</div>\n@if (_image) {\n  <div>\n    <img [src]=\"'data:image/png;base64,'+ _image\" />\n    <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"], dependencies: [{ kind: "component", type: i2$9.RichTextEditorComponent, selector: "ejs-richtexteditor", inputs: ["autoSaveOnIdle", "backgroundColor", "bulletFormatList", "cssClass", "editorMode", "emojiPickerSettings", "enableAutoUrl", "enableHtmlEncode", "enableHtmlSanitizer", "enablePersistence", "enableResize", "enableRtl", "enableTabKey", "enableXhtml", "enabled", "enterKey", "fileManagerSettings", "floatingToolbarOffset", "fontColor", "fontFamily", "fontSize", "format", "formatPainterSettings", "formatter", "height", "htmlAttributes", "iframeSettings", "inlineMode", "insertAudioSettings", "insertImageSettings", "insertVideoSettings", "keyConfig", "locale", "maxLength", "numberFormatList", "pasteCleanupSettings", "placeholder", "quickToolbarSettings", "readonly", "saveInterval", "shiftEnterKey", "showCharCount", "showTooltip", "tableSettings", "toolbarSettings", "undoRedoSteps", "undoRedoTimer", "value", "valueTemplate", "width"], outputs: ["actionBegin", "actionComplete", "afterImageDelete", "afterMediaDelete", "afterPasteCleanup", "beforeDialogClose", "beforeDialogOpen", "beforeFileUpload", "beforeImageDrop", "beforeImageUpload", "beforePasteCleanup", "beforeQuickToolbarOpen", "beforeSanitizeHtml", "blur", "change", "created", "destroyed", "dialogClose", "dialogOpen", "fileRemoving", "fileSelected", "fileUploadFailed", "fileUploadSuccess", "fileUploading", "focus", "imageRemoving", "imageSelected", "imageUploadFailed", "imageUploadSuccess", "imageUploading", "quickToolbarClose", "quickToolbarOpen", "resizeStart", "resizeStop", "resizing", "toolbarClick", "toolbarStatusUpdate", "updatedToolbarStatus", "valueChange"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TaggingDirective, selector: "[bizdocTagging]", inputs: ["bizdocTagging"], outputs: ["bizdocTaggingChange"] }, { 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: "17.2.1", ngImport: i0, type: EditInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-edit-text', template: "<div class=\"column\">\n  @switch (mode) {\n    @case ('html') {\n      <ejs-richtexteditor [value]=\"text\"\n        (change)=\"_htmlChange($event)\"\n      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\n    }\n    @default {\n      <mat-form-field floatLabel=\"never\" class=\"flex\">\n        <textarea matInput cdkTextareaAutosize [autofocus]=\"autofocus\"\n          [(bizdocTagging)]=\"resource\"\n          (keydown)=\"_key($event)\"\n          (input)=\"_textChange($event)\"\n          [value]=\"text\"\n          (paste)=\"_paste($event)\"\n          [placeholder]=\"(placeholder || 'TypeHere') | translate\"\n          (focus)=\"onFocus.emit()\"\n          (focusout)=\"onBlur.emit()\"\n        #textArea></textarea>\n      </mat-form-field>\n    }\n  }\n  <div class=\"row nav-toolbar\">\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\n    </button>\n  </div>\n</div>\n@if (_image) {\n  <div>\n    <img [src]=\"'data:image/png;base64,'+ _image\" />\n    <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"] }]
+            args: [{ selector: 'bizdoc-edit-text', template: "<div class=\"column\">\n  @switch (mode) {\n    @case ('html') {\n      <ejs-richtexteditor [value]=\"text\"\n        (change)=\"_htmlChange($event)\"\n      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\n    }\n    @default {\n      <mat-form-field floatLabel=\"never\" class=\"flex\">\n        <textarea matInput cdkTextareaAutosize [autofocus]=\"autofocus\"\n          [(bizdocTagging)]=\"resource\"\n          (keydown)=\"_key($event)\"\n          (input)=\"_textChange($event)\"\n          [value]=\"text\"\n          (paste)=\"_paste($event)\"\n          [placeholder]=\"(placeholder || 'CommentHere') | translate\"\n          (focus)=\"onFocus.emit()\"\n          (focusout)=\"onBlur.emit()\"\n        #textArea></textarea>\n      </mat-form-field>\n    }\n  }\n  <div class=\"row nav-toolbar\">\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\n    </button>\n  </div>\n</div>\n@if (_image) {\n  <div>\n    <img [src]=\"'data:image/png;base64,'+ _image\" />\n    <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"] }]
         }], ctorParameters: () => [{ type: Popup }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], text: [{
@@ -12765,11 +12770,11 @@ class EditCommentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditCommentComponent, deps: [{ token: PopupRef }, { token: POPUP_DATA }, { token: PromptService }, { token: MailboxService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditCommentComponent, selector: "bizdoc-edit-comment", ngImport: i0, template: "<bizdoc-edit-text (ok)=\"ok($event)\"\r\n                  [resource]=\"data.resource\" [text]=\"data.text\" [image]=\"data.image\"\r\n                  [disabled]=\"sending\" autofocus></bizdoc-edit-text>\r\n", dependencies: [{ kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: EditCommentComponent, selector: "bizdoc-edit-comment", ngImport: i0, template: "<bizdoc-edit-text (ok)=\"ok($event)\"\r\n                  [resource]=\"data.resource\"\r\n                  [text]=\"data.text\"\r\n                  [image]=\"data.image\"\r\n                  [disabled]=\"sending\" autofocus></bizdoc-edit-text>\r\n", dependencies: [{ kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditCommentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-edit-comment', template: "<bizdoc-edit-text (ok)=\"ok($event)\"\r\n                  [resource]=\"data.resource\" [text]=\"data.text\" [image]=\"data.image\"\r\n                  [disabled]=\"sending\" autofocus></bizdoc-edit-text>\r\n" }]
+            args: [{ selector: 'bizdoc-edit-comment', template: "<bizdoc-edit-text (ok)=\"ok($event)\"\r\n                  [resource]=\"data.resource\"\r\n                  [text]=\"data.text\"\r\n                  [image]=\"data.image\"\r\n                  [disabled]=\"sending\" autofocus></bizdoc-edit-text>\r\n" }]
         }], ctorParameters: () => [{ type: PopupRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [POPUP_DATA]
@@ -13019,13 +13024,13 @@ class CommentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CommentComponent, deps: [{ token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: ChatInfo }, { token: AccountService }, { token: Popup }, { token: i1$1.Overlay }, { token: MailboxService }, { token: i0.ViewContainerRef }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CommentComponent, selector: "bizdoc-comment", inputs: { model: "model", item: "item" }, outputs: { deleted: "deleted", reply: "reply" }, host: { classAttribute: "comment" }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\n  <div class=\"comment-body\" #body>\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\n    @if (item.image) {\n      <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\n    }\n  </div>\n  @if (me) {\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n  }\n  <mat-menu #menu>\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\n    </ng-template>\n  </mat-menu>\n</div>\n<div class=\"row\">\n  <div class=\"column\">\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    <div>\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\n      @if (item.edited) {\n        &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\n      }\n      @if (!me) {\n        &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\n      }\n    </div>\n  </div>\n  @if (voting) {\n    <div class=\"comment-actions\">\n      @if (item.votes > 0 || item.votes < 0) {\n        <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\n      }\n      <button mat-icon-button (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\" ><mat-icon>thumb_up_alt</mat-icon></button>\n      <button mat-icon-button (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\" ><mat-icon>thumb_down_alt</mat-icon></button>\n    </div>\n  }\n</div>\n<ng-template #previewTemplate>\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CommentComponent, selector: "bizdoc-comment", inputs: { model: "model", item: "item" }, outputs: { deleted: "deleted", reply: "reply" }, host: { classAttribute: "comment" }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\n  <div class=\"comment-body\" #body>\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\n    @if (item.image) {\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\n    }\n  </div>\n  @if (me) {\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n  }\n  <mat-menu #menu>\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\n    </ng-template>\n  </mat-menu>\n</div>\n<div class=\"row\">\n  <div class=\"column\">\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    <div>\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\n      @if (item.edited) {\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\n      }\n      @if (!me) {\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\n      }\n    </div>\n  </div>\n  @if (voting) {\n  <div class=\"comment-actions\">\n    @if (item.votes > 0 || item.votes < 0) {\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\n    }\n    <button mat-icon-button (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\" [disableRipple]=\"true\"><mat-icon>thumb_up_alt</mat-icon></button>\n    <button mat-icon-button (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\" [disableRipple]=\"true\"><mat-icon>thumb_down_alt</mat-icon></button>\n  </div>\n  }\n</div>\n<ng-template #previewTemplate>\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-comment', host: {
                         class: 'comment'
-                    }, template: "<div class=\"row\">\n  <div class=\"comment-body\" #body>\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\n    @if (item.image) {\n      <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\n    }\n  </div>\n  @if (me) {\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n  }\n  <mat-menu #menu>\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\n    </ng-template>\n  </mat-menu>\n</div>\n<div class=\"row\">\n  <div class=\"column\">\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    <div>\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\n      @if (item.edited) {\n        &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\n      }\n      @if (!me) {\n        &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\n      }\n    </div>\n  </div>\n  @if (voting) {\n    <div class=\"comment-actions\">\n      @if (item.votes > 0 || item.votes < 0) {\n        <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\n      }\n      <button mat-icon-button (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\" ><mat-icon>thumb_up_alt</mat-icon></button>\n      <button mat-icon-button (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\" ><mat-icon>thumb_down_alt</mat-icon></button>\n    </div>\n  }\n</div>\n<ng-template #previewTemplate>\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n" }]
+                    }, template: "<div class=\"row\">\n  <div class=\"comment-body\" #body>\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\n    @if (item.image) {\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\n    }\n  </div>\n  @if (me) {\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n  }\n  <mat-menu #menu>\n    <ng-template matMenuContent>\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\n    </ng-template>\n  </mat-menu>\n</div>\n<div class=\"row\">\n  <div class=\"column\">\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    <div>\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\n      @if (item.edited) {\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\n      }\n      @if (!me) {\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\n      }\n    </div>\n  </div>\n  @if (voting) {\n  <div class=\"comment-actions\">\n    @if (item.votes > 0 || item.votes < 0) {\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\n    }\n    <button mat-icon-button (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\" [disableRipple]=\"true\"><mat-icon>thumb_up_alt</mat-icon></button>\n    <button mat-icon-button (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\" [disableRipple]=\"true\"><mat-icon>thumb_down_alt</mat-icon></button>\n  </div>\n  }\n</div>\n<ng-template #previewTemplate>\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: ChatInfo }, { type: AccountService }, { type: Popup }, { type: i1$1.Overlay }, { type: MailboxService }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -13065,7 +13070,6 @@ class CommentsComponent {
         this._top = false;
         this._textChange = new Subject();
         this._destroy = new Subject();
-        this.trackBy = (_, item) => item.id;
         this._preserveDraft = _config.comments && _config.comments.preserveDraft;
     }
     ngOnInit() {
@@ -13232,13 +13236,13 @@ class CommentsComponent {
             window.localStorage.setItem(id, this.input.text);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CommentsComponent, deps: [{ token: AccountService }, { token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: ChatInfo }, { token: MailboxService }, { token: HubService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CommentsComponent, selector: "bizdoc-comments", inputs: { model: "model" }, outputs: { change: "change" }, host: { classAttribute: "comments" }, viewQueries: [{ propertyName: "threadElement", first: true, predicate: ["thread"], descendants: true, read: ElementRef, static: true }, { propertyName: "input", first: true, predicate: EditInputComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!model.comments.length) {\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\n}\n\n<div class=\"column\" #thread (scroll)=\"onScroll($event)\" class=\"comments-thread\">\n  @for (c of model.comments; track trackBy($index, c)) {\n    <ng-container role=\"listitem\">\n      @if (!c.deleted || showDeleted) {\n        <bizdoc-comment\n          [model]=\"model\"\n          [item]=\"c\"\n          (reply)=\"reply(c)\"\n          (deleted)=\"deleted(c)\">\n        </bizdoc-comment>\n      } @else {\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\n      }\n    </ng-container>\n  }\n</div>\n\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\n\n@if (replyName) {\n  <div class=\"comments-reply\">\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\n  </div>\n}\n\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n</bizdoc-edit-text>\n\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center;font-variant:all-small-caps}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}.modification{font-variant:all-small-caps}\n"], dependencies: [{ kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: CommentComponent, selector: "bizdoc-comment", inputs: ["model", "item"], outputs: ["deleted", "reply"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CommentsComponent, selector: "bizdoc-comments", inputs: { model: "model" }, outputs: { change: "change" }, host: { classAttribute: "comments" }, viewQueries: [{ propertyName: "threadElement", first: true, predicate: ["thread"], descendants: true, read: ElementRef, static: true }, { propertyName: "input", first: true, predicate: EditInputComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!model.comments.length) {\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\n}\n\n<div class=\"column comments-thread\" #thread (scroll)=\"onScroll($event)\">\n  @for (c of model.comments; track c.id) {\n    <ng-container role=\"listitem\">\n      @if (!c.deleted || showDeleted) {\n        <bizdoc-comment\n          [model]=\"model\"\n          [item]=\"c\"\n          (reply)=\"reply(c)\"\n          (deleted)=\"deleted(c)\">\n        </bizdoc-comment>\n      } @else {\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\n      }\n    </ng-container>\n  }\n</div>\n\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\n\n@if (replyName) {\n  <div class=\"comments-reply\">\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\n  </div>\n}\n\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n</bizdoc-edit-text>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center;font-variant:small-caps}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}.modification{font-variant:small-caps}\n"], dependencies: [{ kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: CommentComponent, selector: "bizdoc-comment", inputs: ["model", "item"], outputs: ["deleted", "reply"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CommentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-comments', host: {
                         class: 'comments'
-                    }, template: "@if (!model.comments.length) {\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\n}\n\n<div class=\"column\" #thread (scroll)=\"onScroll($event)\" class=\"comments-thread\">\n  @for (c of model.comments; track trackBy($index, c)) {\n    <ng-container role=\"listitem\">\n      @if (!c.deleted || showDeleted) {\n        <bizdoc-comment\n          [model]=\"model\"\n          [item]=\"c\"\n          (reply)=\"reply(c)\"\n          (deleted)=\"deleted(c)\">\n        </bizdoc-comment>\n      } @else {\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\n      }\n    </ng-container>\n  }\n</div>\n\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\n\n@if (replyName) {\n  <div class=\"comments-reply\">\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\n  </div>\n}\n\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n</bizdoc-edit-text>\n\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center;font-variant:all-small-caps}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}.modification{font-variant:all-small-caps}\n"] }]
+                    }, template: "@if (!model.comments.length) {\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\n}\n\n<div class=\"column comments-thread\" #thread (scroll)=\"onScroll($event)\">\n  @for (c of model.comments; track c.id) {\n    <ng-container role=\"listitem\">\n      @if (!c.deleted || showDeleted) {\n        <bizdoc-comment\n          [model]=\"model\"\n          [item]=\"c\"\n          (reply)=\"reply(c)\"\n          (deleted)=\"deleted(c)\">\n        </bizdoc-comment>\n      } @else {\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\n      }\n    </ng-container>\n  }\n</div>\n\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\n\n@if (replyName) {\n  <div class=\"comments-reply\">\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\n  </div>\n}\n\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n</bizdoc-edit-text>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center;font-variant:small-caps}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}.modification{font-variant:small-caps}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: ChatInfo }, { type: MailboxService }, { type: HubService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -13276,13 +13280,11 @@ class CommentsPaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CommentsPaneComponent, deps: [{ token: TranslateService }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: CommentsPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, viewQueries: [{ propertyName: "_comments", first: true, predicate: CommentsComponent, descendants: true, static: true }], ngImport: i0, template: `<bizdoc-comments [model]=model></bizdoc-comments>`, isInline: true, styles: [":host{min-width:320px}\n"], dependencies: [{ kind: "component", type: CommentsComponent, selector: "bizdoc-comments", inputs: ["model"], outputs: ["change"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: CommentsPaneComponent, selector: "ng-component", viewQueries: [{ propertyName: "_comments", first: true, predicate: CommentsComponent, descendants: true, static: true }], ngImport: i0, template: `<bizdoc-comments [model]=model></bizdoc-comments>`, isInline: true, styles: [":host{min-width:320px}\n"], dependencies: [{ kind: "component", type: CommentsComponent, selector: "bizdoc-comments", inputs: ["model"], outputs: ["change"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CommentsPaneComponent, decorators: [{
             type: Component,
-            args: [{ template: `<bizdoc-comments [model]=model></bizdoc-comments>`, host: {
-                        class: 'pane'
-                    }, styles: [":host{min-width:320px}\n"] }]
+            args: [{ template: `<bizdoc-comments [model]=model></bizdoc-comments>`, styles: [":host{min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: TranslateService }, { type: PaneRef }], propDecorators: { _comments: [{
                 type: ViewChild,
                 args: [CommentsComponent, { static: true }]
@@ -13590,13 +13592,11 @@ class CubeExplorePaneComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CubeExplorePaneComponent, deps: [{ token: PaneRef }, { token: PromptService }, { token: SessionService }, { token: CubeService }, { token: TranslateService }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: CubeExplorePaneComponent, selector: "ng-component", host: { listeners: { "window:resize": "resize()" }, classAttribute: "pane" }, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"items.exportExcel()\" [bizdocTooltip]=\"'DownloadExcel' | translate\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-cube-tags [interactive]=false [cube]=\"cube\" [axes]=\"axes\"></bizdoc-cube-tags>\r\n<bizdoc-cube-explore #items [cube]=\"cube\" [index]=\"index\" [axes]=axes\r\n                     (explore)=\"item($event)\" (loadingChange)=\"loading = $event\"\r\n                     [scope]=\"scope\" [pageSize]=\"pageSize\"></bizdoc-cube-explore>\r\n", styles: [":host{min-width:360px}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: FilterTagsComponent, selector: "bizdoc-cube-tags", inputs: ["axes", "cube", "interactive"], outputs: ["axesChange"] }, { kind: "component", type: ExploreItemsComponent, selector: "bizdoc-cube-explore", inputs: ["pageSize", "cube", "index", "scope", "axes", "loading"], outputs: ["explore", "load", "loadingChange"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { 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: "14.0.0", version: "17.2.1", type: CubeExplorePaneComponent, selector: "ng-component", host: { listeners: { "window:resize": "resize()" } }, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"items.exportExcel()\" [bizdocTooltip]=\"'DownloadExcel' | translate\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-cube-tags [interactive]=false [cube]=\"cube\" [axes]=\"axes\"></bizdoc-cube-tags>\r\n<bizdoc-cube-explore #items [cube]=\"cube\" [index]=\"index\" [axes]=axes\r\n                     (explore)=\"item($event)\" (loadingChange)=\"loading = $event\"\r\n                     [scope]=\"scope\" [pageSize]=\"pageSize\"></bizdoc-cube-explore>\r\n", styles: [":host{min-width:360px}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: FilterTagsComponent, selector: "bizdoc-cube-tags", inputs: ["axes", "cube", "interactive"], outputs: ["axesChange"] }, { kind: "component", type: ExploreItemsComponent, selector: "bizdoc-cube-explore", inputs: ["pageSize", "cube", "index", "scope", "axes", "loading"], outputs: ["explore", "load", "loadingChange"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { 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: "17.2.1", ngImport: i0, type: CubeExplorePaneComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"items.exportExcel()\" [bizdocTooltip]=\"'DownloadExcel' | translate\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-cube-tags [interactive]=false [cube]=\"cube\" [axes]=\"axes\"></bizdoc-cube-tags>\r\n<bizdoc-cube-explore #items [cube]=\"cube\" [index]=\"index\" [axes]=axes\r\n                     (explore)=\"item($event)\" (loadingChange)=\"loading = $event\"\r\n                     [scope]=\"scope\" [pageSize]=\"pageSize\"></bizdoc-cube-explore>\r\n", styles: [":host{min-width:360px}\n"] }]
+            args: [{ template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"items.exportExcel()\" [bizdocTooltip]=\"'DownloadExcel' | translate\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-cube-tags [interactive]=false [cube]=\"cube\" [axes]=\"axes\"></bizdoc-cube-tags>\r\n<bizdoc-cube-explore #items [cube]=\"cube\" [index]=\"index\" [axes]=axes\r\n                     (explore)=\"item($event)\" (loadingChange)=\"loading = $event\"\r\n                     [scope]=\"scope\" [pageSize]=\"pageSize\"></bizdoc-cube-explore>\r\n", styles: [":host{min-width:360px}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: PromptService }, { type: SessionService }, { type: CubeService }, { type: TranslateService }, { type: PanesRouter }], propDecorators: { resize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -13955,13 +13955,11 @@ class ReportPaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ReportPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: Popup }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: GuideService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ReportPaneComponent, selector: "bizdoc-report.pane", host: { listeners: { "window.keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "viewer", first: true, predicate: ReportViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\n  @if (report.guide) {\n    <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  @if (hasFilters) {\n    <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n    <button mat-icon-button (click)=\"openFilter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" class=\"flex\"></bizdoc-report-viewer>\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: ReportViewerComponent, selector: "bizdoc-report-viewer", inputs: ["report", "args"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { 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: "17.2.1", type: ReportPaneComponent, selector: "bizdoc-report.pane", host: { listeners: { "window.keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "viewer", first: true, predicate: ReportViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\n  @if (report.guide) {\n    <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  @if (hasFilters) {\n    <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n    <button mat-icon-button (click)=\"openFilter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" class=\"flex\"></bizdoc-report-viewer>\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: ReportViewerComponent, selector: "bizdoc-report-viewer", inputs: ["report", "args"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { 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: "17.2.1", ngImport: i0, type: ReportPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-report.pane', host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\n  @if (report.guide) {\n    <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  @if (hasFilters) {\n    <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n    <button mat-icon-button (click)=\"openFilter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" class=\"flex\"></bizdoc-report-viewer>\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}\n"] }]
+            args: [{ selector: 'bizdoc-report.pane', template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\n  @if (report.guide) {\n    <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  }\n  @if (hasFilters) {\n    <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\n    <button mat-icon-button (click)=\"openFilter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" #filterEl><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" class=\"flex\"></bizdoc-report-viewer>\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: PaneRef }, { type: Popup }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: GuideService }], propDecorators: { filterEl: [{
                 type: ViewChild,
                 args: ['filterEl', { read: ElementRef }]
@@ -14007,13 +14005,11 @@ class ExploreItemPaneComponent {
         this._pane.paramsChange().subscribe(p => this.template = p['template']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExploreItemPaneComponent, deps: [{ token: PaneRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ExploreItemPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, ngImport: i0, template: "<bizdoc-cube-item [template]=\"template\" [model]=\"model\"></bizdoc-cube-item>\r\n\r\n<!--<lottie name=\"4958-404-not-found\" *ngIf=\"problem\"></lottie>-->\r\n", dependencies: [{ kind: "component", type: ExploreItemImplComponent, selector: "bizdoc-cube-item", inputs: ["template", "model"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ExploreItemPaneComponent, selector: "ng-component", ngImport: i0, template: "<bizdoc-cube-item [template]=\"template\" [model]=\"model\"></bizdoc-cube-item>\r\n\r\n<!--<lottie name=\"4958-404-not-found\" *ngIf=\"problem\"></lottie>-->\r\n", dependencies: [{ kind: "component", type: ExploreItemImplComponent, selector: "bizdoc-cube-item", inputs: ["template", "model"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExploreItemPaneComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, template: "<bizdoc-cube-item [template]=\"template\" [model]=\"model\"></bizdoc-cube-item>\r\n\r\n<!--<lottie name=\"4958-404-not-found\" *ngIf=\"problem\"></lottie>-->\r\n" }]
+            args: [{ template: "<bizdoc-cube-item [template]=\"template\" [model]=\"model\"></bizdoc-cube-item>\r\n\r\n<!--<lottie name=\"4958-404-not-found\" *ngIf=\"problem\"></lottie>-->\r\n" }]
         }], ctorParameters: () => [{ type: PaneRef }] });
 
 class WorkflowNodeComponent {
@@ -14701,13 +14697,11 @@ class WorkflowComponent {
         this._nodedestroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: WorkflowComponent, deps: [{ token: PromptService }, { token: SystemService }, { token: PaneRef }, { token: PanesRouter }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPaletteEl"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagramEl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\n    </button>\n    <!--@if(connectors.length){\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n    @if(nodes[0].annotations.length){\n      < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\n   }\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n  }-->\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\n  </mat-menu>\n  &nbsp;\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\n          'sf-icon-left': alignment === 'Left',\n          'sf-icon-center': alignment === 'Center',\n          'sf-icon-bottom': alignment === 'Bottom',\n          'sf-icon-right': alignment === 'Right'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"align('Top')\">\n      <span class=\"e-icons sf-icon-top\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Left')\">\n      <span class=\"e-icons sf-icon-left\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Center')\">\n      <span class=\"e-icons sf-icon-center\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Right')\">\n      <span class=\"e-icons sf-icon-right\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Bottom')\">\n      <span class=\"e-icons sf-icon-bottom\"></span>\n    </button>\n  </mat-menu>\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\n          [bizdocTooltip]=\"'FontSize'|translate\">\n    <mat-icon>format_size</mat-icon>\n  </button>\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\n    @for (size of fontSizes; track size) {\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\n      {{size}}\n    </button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<div class=\"row container\">\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\n    <div dir=\"ltr\" #symbolPaletteEl>\n    </div>\n  </div>\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\n  </div>\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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.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: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPaletteEl"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagramEl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\n    </button>\n    <!--@if(connectors.length){\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n    @if(nodes[0].annotations.length){\n      < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\n   }\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n  }-->\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\n  </mat-menu>\n  &nbsp;\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\n          'sf-icon-left': alignment === 'Left',\n          'sf-icon-center': alignment === 'Center',\n          'sf-icon-bottom': alignment === 'Bottom',\n          'sf-icon-right': alignment === 'Right'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"align('Top')\">\n      <span class=\"e-icons sf-icon-top\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Left')\">\n      <span class=\"e-icons sf-icon-left\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Center')\">\n      <span class=\"e-icons sf-icon-center\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Right')\">\n      <span class=\"e-icons sf-icon-right\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Bottom')\">\n      <span class=\"e-icons sf-icon-bottom\"></span>\n    </button>\n  </mat-menu>\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\n          [bizdocTooltip]=\"'FontSize'|translate\">\n    <mat-icon>format_size</mat-icon>\n  </button>\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\n    @for (size of fontSizes; track size) {\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\n      {{size}}\n    </button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<div class=\"row container\">\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\n    <div dir=\"ltr\" #symbolPaletteEl>\n    </div>\n  </div>\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\n  </div>\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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.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: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: WorkflowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-workflow', host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\n    </button>\n    <!--@if(connectors.length){\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n    @if(nodes[0].annotations.length){\n      < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\n   }\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n  }-->\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\n  </mat-menu>\n  &nbsp;\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\n          'sf-icon-left': alignment === 'Left',\n          'sf-icon-center': alignment === 'Center',\n          'sf-icon-bottom': alignment === 'Bottom',\n          'sf-icon-right': alignment === 'Right'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"align('Top')\">\n      <span class=\"e-icons sf-icon-top\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Left')\">\n      <span class=\"e-icons sf-icon-left\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Center')\">\n      <span class=\"e-icons sf-icon-center\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Right')\">\n      <span class=\"e-icons sf-icon-right\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Bottom')\">\n      <span class=\"e-icons sf-icon-bottom\"></span>\n    </button>\n  </mat-menu>\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\n          [bizdocTooltip]=\"'FontSize'|translate\">\n    <mat-icon>format_size</mat-icon>\n  </button>\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\n    @for (size of fontSizes; track size) {\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\n      {{size}}\n    </button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<div class=\"row container\">\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\n    <div dir=\"ltr\" #symbolPaletteEl>\n    </div>\n  </div>\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\n  </div>\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"] }]
+            args: [{ selector: 'bizdoc-workflow', template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\n  <span class=\"tools-divider\"></span>\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\n    </button>\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\n    </button>\n    <!--@if(connectors.length){\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n    @if(nodes[0].annotations.length){\n      < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\n   }\n      < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\n    < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\n  }-->\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\n  </mat-menu>\n  &nbsp;\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\n          'sf-icon-left': alignment === 'Left',\n          'sf-icon-center': alignment === 'Center',\n          'sf-icon-bottom': alignment === 'Bottom',\n          'sf-icon-right': alignment === 'Right'}\"></span>\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\n    <button mat-menu-item (click)=\"align('Top')\">\n      <span class=\"e-icons sf-icon-top\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Left')\">\n      <span class=\"e-icons sf-icon-left\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Center')\">\n      <span class=\"e-icons sf-icon-center\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Right')\">\n      <span class=\"e-icons sf-icon-right\"></span>\n    </button>\n    <button mat-menu-item (click)=\"align('Bottom')\">\n      <span class=\"e-icons sf-icon-bottom\"></span>\n    </button>\n  </mat-menu>\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\n          [bizdocTooltip]=\"'FontSize'|translate\">\n    <mat-icon>format_size</mat-icon>\n  </button>\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\n    @for (size of fontSizes; track size) {\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\n      {{size}}\n    </button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<div class=\"row container\">\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\n    <div dir=\"ltr\" #symbolPaletteEl>\n    </div>\n  </div>\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\n  </div>\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: SystemService }, { type: PaneRef }, { type: PanesRouter }, { type: SessionService }, { type: TranslateService }], propDecorators: { symbolPaletteEl: [{
                 type: ViewChild,
                 args: ['symbolPaletteEl', { static: true }]
@@ -14783,15 +14777,12 @@ class UtilityPaneComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: i1.HttpClient }, { token: PromptService }, { token: HubService }, { token: BizDocComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UtilityPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UtilityPaneComponent, selector: "ng-component", viewQueries: [{ propertyName: "vc", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '<ng-container #container></ng-container>',
-                    host: {
-                        class: 'pane'
-                    }
+                    template: '<ng-container #container></ng-container>'
                 }]
         }], ctorParameters: () => [{ type: SessionService }, { type: PaneRef }, { type: i1.HttpClient }, { type: PromptService }, { type: HubService }, { type: BizDocComponentFactoryResolver }, { type: i0.Injector }], propDecorators: { vc: [{
                 type: ViewChild,
@@ -15959,13 +15950,11 @@ class TracePaneComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TracePaneComponent, deps: [{ token: TranslateService }, { token: PaneRef }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: TracePaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, viewQueries: [{ propertyName: "trace", first: true, predicate: TraceViewComponent, descendants: true, static: true }, { propertyName: "flow", first: true, predicate: FlowViewComponent, descendants: true, static: true }], ngImport: i0, template: "<bizdoc-trace [model]=\"model\" (versionSelected)=\"showVersion($event)\"></bizdoc-trace>\r\n\r\n<bizdoc-flow [model]=\"model\"></bizdoc-flow>\r\n", styles: [":host{padding:0 8px;display:block;min-width:400px}\n"], dependencies: [{ kind: "component", type: TraceViewComponent, selector: "bizdoc-trace", inputs: ["model"], outputs: ["versionSelected"] }, { kind: "component", type: FlowViewComponent, selector: "bizdoc-flow", inputs: ["model", "connectorType"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: TracePaneComponent, selector: "ng-component", viewQueries: [{ propertyName: "trace", first: true, predicate: TraceViewComponent, descendants: true, static: true }, { propertyName: "flow", first: true, predicate: FlowViewComponent, descendants: true, static: true }], ngImport: i0, template: "<bizdoc-trace [model]=\"model\" (versionSelected)=\"showVersion($event)\"></bizdoc-trace>\r\n\r\n<bizdoc-flow [model]=\"model\"></bizdoc-flow>\r\n", styles: [":host{padding:0 8px;display:block;min-width:400px}\n"], dependencies: [{ kind: "component", type: TraceViewComponent, selector: "bizdoc-trace", inputs: ["model"], outputs: ["versionSelected"] }, { kind: "component", type: FlowViewComponent, selector: "bizdoc-flow", inputs: ["model", "connectorType"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TracePaneComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, template: "<bizdoc-trace [model]=\"model\" (versionSelected)=\"showVersion($event)\"></bizdoc-trace>\r\n\r\n<bizdoc-flow [model]=\"model\"></bizdoc-flow>\r\n", styles: [":host{padding:0 8px;display:block;min-width:400px}\n"] }]
+            args: [{ template: "<bizdoc-trace [model]=\"model\" (versionSelected)=\"showVersion($event)\"></bizdoc-trace>\r\n\r\n<bizdoc-flow [model]=\"model\"></bizdoc-flow>\r\n", styles: [":host{padding:0 8px;display:block;min-width:400px}\n"] }]
         }], ctorParameters: () => [{ type: TranslateService }, { type: PaneRef }, { type: PanesRouter }], propDecorators: { trace: [{
                 type: ViewChild,
                 args: [TraceViewComponent, { static: true }]
@@ -16056,13 +16045,11 @@ class VersionPaneComponent {
         this._router.navigate(['../', 'version', new Date(time).valueOf().encodeId()], { policy: OpenPolicy.Tab });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VersionPaneComponent, deps: [{ token: PaneRef }, { token: TranslateService }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: VersionPaneComponent, selector: "bizdoc-version.pane", host: { classAttribute: "pane" }, ngImport: i0, template: "<div class=\"row\">\n  <span class=\"divider\"></span>\n  @if (versions.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" [attr.aria-label]=\"'Version' | translate\">\n      <mat-icon>filter_list</mat-icon>\n    </button>\n  }\n  <mat-menu #menu>\n    @for (l of versions; track l) {\n      <button mat-menu-item (click)=\"switch(l.time)\">\n        <bizdoc-identity-name [identity]=\"l.userId\" [by]=\"l.byId\" chating=\"none\"></bizdoc-identity-name>\n        {{l.time | amCalendar : null : CALENDAR_SPEC}}\n      </button>\n    }\n  </mat-menu>\n</div>\n<div class=\"info mat-body-1\">\n  <bizdoc-identity-name [identity]=\"log.userId\" [by]=\"log.byId\"></bizdoc-identity-name>\n  | <span>{{log.time | amCalendar : null : CALENDAR_SPEC }}</span>\n</div>\n<div>\n  <bizdoc-version-compare [model]=\"model\" [version]=\"log.time\"></bizdoc-version-compare>\n</div>\n", styles: [":host{padding:0 8px;display:block;min-width:350px}\n"], dependencies: [{ 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.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: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: VersionCompareComponent, selector: "bizdoc-version-compare", inputs: ["model", "version"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: VersionPaneComponent, selector: "bizdoc-version.pane", ngImport: i0, template: "<div class=\"row\">\n  <span class=\"divider\"></span>\n  @if (versions.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" [attr.aria-label]=\"'Version' | translate\">\n      <mat-icon>filter_list</mat-icon>\n    </button>\n  }\n  <mat-menu #menu>\n    @for (l of versions; track l) {\n      <button mat-menu-item (click)=\"switch(l.time)\">\n        <bizdoc-identity-name [identity]=\"l.userId\" [by]=\"l.byId\" chating=\"none\"></bizdoc-identity-name>\n        {{l.time | amCalendar : null : CALENDAR_SPEC}}\n      </button>\n    }\n  </mat-menu>\n</div>\n<div class=\"info mat-body-1\">\n  <bizdoc-identity-name [identity]=\"log.userId\" [by]=\"log.byId\"></bizdoc-identity-name>\n  | <span>{{log.time | amCalendar : null : CALENDAR_SPEC }}</span>\n</div>\n<div>\n  <bizdoc-version-compare [model]=\"model\" [version]=\"log.time\"></bizdoc-version-compare>\n</div>\n", styles: [":host{padding:0 8px;display:block;min-width:350px}\n"], dependencies: [{ 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.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: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: VersionCompareComponent, selector: "bizdoc-version-compare", inputs: ["model", "version"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VersionPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-version.pane', host: {
-                        class: 'pane'
-                    }, template: "<div class=\"row\">\n  <span class=\"divider\"></span>\n  @if (versions.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" [attr.aria-label]=\"'Version' | translate\">\n      <mat-icon>filter_list</mat-icon>\n    </button>\n  }\n  <mat-menu #menu>\n    @for (l of versions; track l) {\n      <button mat-menu-item (click)=\"switch(l.time)\">\n        <bizdoc-identity-name [identity]=\"l.userId\" [by]=\"l.byId\" chating=\"none\"></bizdoc-identity-name>\n        {{l.time | amCalendar : null : CALENDAR_SPEC}}\n      </button>\n    }\n  </mat-menu>\n</div>\n<div class=\"info mat-body-1\">\n  <bizdoc-identity-name [identity]=\"log.userId\" [by]=\"log.byId\"></bizdoc-identity-name>\n  | <span>{{log.time | amCalendar : null : CALENDAR_SPEC }}</span>\n</div>\n<div>\n  <bizdoc-version-compare [model]=\"model\" [version]=\"log.time\"></bizdoc-version-compare>\n</div>\n", styles: [":host{padding:0 8px;display:block;min-width:350px}\n"] }]
+            args: [{ selector: 'bizdoc-version.pane', template: "<div class=\"row\">\n  <span class=\"divider\"></span>\n  @if (versions.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" [attr.aria-label]=\"'Version' | translate\">\n      <mat-icon>filter_list</mat-icon>\n    </button>\n  }\n  <mat-menu #menu>\n    @for (l of versions; track l) {\n      <button mat-menu-item (click)=\"switch(l.time)\">\n        <bizdoc-identity-name [identity]=\"l.userId\" [by]=\"l.byId\" chating=\"none\"></bizdoc-identity-name>\n        {{l.time | amCalendar : null : CALENDAR_SPEC}}\n      </button>\n    }\n  </mat-menu>\n</div>\n<div class=\"info mat-body-1\">\n  <bizdoc-identity-name [identity]=\"log.userId\" [by]=\"log.byId\"></bizdoc-identity-name>\n  | <span>{{log.time | amCalendar : null : CALENDAR_SPEC }}</span>\n</div>\n<div>\n  <bizdoc-version-compare [model]=\"model\" [version]=\"log.time\"></bizdoc-version-compare>\n</div>\n", styles: [":host{padding:0 8px;display:block;min-width:350px}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: TranslateService }, { type: PanesRouter }] });
 
 class RecipientResolver {
@@ -16322,11 +16309,11 @@ class ScheduleViewComponent {
         this._router.navigate(['mailbox/d', evt.documentId.encodeId()]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ScheduleViewComponent, deps: [{ token: SessionService }, { token: MailboxService }, { token: PanesRouter }, { token: PromptService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ScheduleViewComponent, selector: "bizdoc-schedule", inputs: { selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "schedule", first: true, predicate: ["schedule"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button [bizdocTooltip]=\"'PrevPage'|translate\" (click)=\"prev()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <span class=\"mat-body\">{{ starting | dateRange : ending : calendarOptions  }}</span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'NextPage'|translate\" (click)=\"next()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'View'|translate\" [matMenuTriggerFor]=\"view\"><mat-icon>view_agenda</mat-icon></button>\r\n  <mat-menu #view>\r\n    <button mat-menu-item (click)=\"changeView('WorkWeek')\">{{'WorkWeek'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Month')\">{{'Month'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Agenda')\">{{'Agenda'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('MonthAgenda')\">{{'MonthAgenda'|translate}}</button>\r\n    <!--<button mat-menu-item (click)=\"changeView('TimelineMonth')\">{{'TimelineMonth'|translate}}</button>-->\r\n    <button mat-menu-item (click)=\"changeView('Day')\">{{'Day'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Year')\">{{'Year'|translate}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"export()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<style scoped> \r\n  .e-popup-close {\r\n    display: none\r\n  }\r\n</style>\r\n<ejs-schedule #schedule [eventSettings]=\"eventSettings\" [currentView]=\"currentView\" [selectedDate]=\"selectedDate\"\r\n              [readonly]=\"true\" (navigating)=\"nav($event)\" height=\"100%\" [showHeaderBar]=\"false\"\r\n              (select)=\"select($event)\" class=\"flex\"\r\n              (eventClick)=\"eventClick($event)\" (dragStart)=\"drag($event)\" [@swape]=\"page\" class=\"flex\">\r\n  <e-views>\r\n    <e-view option=\"Month\"></e-view>\r\n    <e-view option=\"Day\"></e-view>\r\n    <e-view option=\"WorkWeek\"></e-view>\r\n    <e-view option=\"Agenda\"></e-view>\r\n    <e-view option=\"MonthAgenda\"></e-view>\r\n    <e-view option=\"TimelineMonth\"></e-view>\r\n    <e-view option=\"Year\"></e-view>\r\n  </e-views>\r\n</ejs-schedule>\r\n", styles: ["::ng-deep .e-dlg-container{display:none}::ng-deep .e-popup{display:none}:host{display:flex;height:100%;flex-direction:column}\n", " \n  .e-popup-close {\n    display: none\n  }\n"], dependencies: [{ kind: "component", type: i5$3.ScheduleComponent, selector: "ejs-schedule", inputs: ["agendaDaysCount", "allowDragAndDrop", "allowInline", "allowKeyboardInteraction", "allowMultiCellSelection", "allowMultiDrag", "allowMultiRowSelection", "allowResizing", "allowSwiping", "calendarMode", "cellHeaderTemplate", "cellTemplate", "cssClass", "currentView", "dateFormat", "dateHeaderTemplate", "dateRangeTemplate", "dayHeaderTemplate", "editorFooterTemplate", "editorHeaderTemplate", "editorTemplate", "enableAdaptiveUI", "enableAllDayScroll", "enableHtmlSanitizer", "enablePersistence", "enableRecurrenceValidation", "enableRtl", "endHour", "eventDragArea", "eventSettings", "firstDayOfWeek", "firstMonthOfYear", "group", "headerIndentTemplate", "headerRows", "height", "hideEmptyAgendaDays", "locale", "maxDate", "minDate", "monthHeaderTemplate", "monthsCount", "quickInfoOnSelectionEnd", "quickInfoTemplates", "readonly", "resourceHeaderTemplate", "resources", "rowAutoHeight", "selectedDate", "showHeaderBar", "showQuickInfo", "showTimeIndicator", "showWeekNumber", "showWeekend", "startHour", "timeFormat", "timeScale", "timezone", "timezoneDataSource", "toolbarItems", "views", "weekRule", "width", "workDays", "workHours"], outputs: ["actionBegin", "actionComplete", "actionFailure", "cellClick", "cellDoubleClick", "created", "dataBinding", "dataBound", "destroyed", "drag", "dragStart", "dragStop", "eventClick", "eventDoubleClick", "eventRendered", "hover", "moreEventsClick", "navigating", "popupClose", "popupOpen", "renderCell", "resizeStart", "resizeStop", "resizing", "select", "virtualScrollStart", "virtualScrollStop", "currentViewChange", "selectedDateChange"] }, { kind: "directive", type: i5$3.ViewDirective, selector: "e-views>e-view", inputs: ["allowVirtualScrolling", "cellHeaderTemplate", "cellTemplate", "dateFormat", "dateHeaderTemplate", "dateRangeTemplate", "dayHeaderTemplate", "displayDate", "displayName", "enableLazyLoading", "endHour", "eventTemplate", "firstDayOfWeek", "firstMonthOfYear", "group", "headerIndentTemplate", "headerRows", "interval", "isSelected", "maxEventsPerRow", "monthHeaderTemplate", "monthsCount", "numberOfWeeks", "option", "orientation", "readonly", "resourceHeaderTemplate", "showWeekNumber", "showWeekend", "startHour", "timeFormat", "timeScale", "workDays"] }, { kind: "directive", type: i5$3.ViewsDirective, selector: "ejs-schedule>e-views" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: DateRangePipe, name: "dateRange" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [swapAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ScheduleViewComponent, selector: "bizdoc-schedule", inputs: { selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "schedule", first: true, predicate: ["schedule"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button [bizdocTooltip]=\"'PrevPage'|translate\" (click)=\"prev()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <span class=\"mat-body\">{{ starting | dateRange : ending : calendarOptions  }}</span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'NextPage'|translate\" (click)=\"next()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'View'|translate\" [matMenuTriggerFor]=\"view\"><mat-icon>view_agenda</mat-icon></button>\r\n  <mat-menu #view>\r\n    <button mat-menu-item (click)=\"changeView('WorkWeek')\">{{'WorkWeek'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Month')\">{{'Month'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Agenda')\">{{'Agenda'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('MonthAgenda')\">{{'MonthAgenda'|translate}}</button>\r\n    <!--<button mat-menu-item (click)=\"changeView('TimelineMonth')\">{{'TimelineMonth'|translate}}</button>-->\r\n    <button mat-menu-item (click)=\"changeView('Day')\">{{'Day'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Year')\">{{'Year'|translate}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"export()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<style scoped> \r\n  .e-popup-close {\r\n    display: none\r\n  }\r\n</style>\r\n<ejs-schedule #schedule [eventSettings]=\"eventSettings\" [currentView]=\"currentView\" [selectedDate]=\"selectedDate\"\r\n              [readonly]=\"true\" (navigating)=\"nav($event)\" height=\"100%\" [showHeaderBar]=\"false\"\r\n              (select)=\"select($event)\" class=\"flex\"\r\n              (eventClick)=\"eventClick($event)\" (dragStart)=\"drag($event)\" [@swape]=\"page\">\r\n  <e-views>\r\n    <e-view option=\"Month\"></e-view>\r\n    <e-view option=\"Day\"></e-view>\r\n    <e-view option=\"WorkWeek\"></e-view>\r\n    <e-view option=\"Agenda\"></e-view>\r\n    <e-view option=\"MonthAgenda\"></e-view>\r\n    <e-view option=\"TimelineMonth\"></e-view>\r\n    <e-view option=\"Year\"></e-view>\r\n  </e-views>\r\n</ejs-schedule>\r\n", styles: ["::ng-deep .e-dlg-container{display:none}::ng-deep .e-popup{display:none}:host{display:flex;height:100%;flex-direction:column}\n", " \n  .e-popup-close {\n    display: none\n  }\n"], dependencies: [{ kind: "component", type: i5$3.ScheduleComponent, selector: "ejs-schedule", inputs: ["agendaDaysCount", "allowDragAndDrop", "allowInline", "allowKeyboardInteraction", "allowMultiCellSelection", "allowMultiDrag", "allowMultiRowSelection", "allowResizing", "allowSwiping", "calendarMode", "cellHeaderTemplate", "cellTemplate", "cssClass", "currentView", "dateFormat", "dateHeaderTemplate", "dateRangeTemplate", "dayHeaderTemplate", "editorFooterTemplate", "editorHeaderTemplate", "editorTemplate", "enableAdaptiveUI", "enableAllDayScroll", "enableHtmlSanitizer", "enablePersistence", "enableRecurrenceValidation", "enableRtl", "endHour", "eventDragArea", "eventSettings", "firstDayOfWeek", "firstMonthOfYear", "group", "headerIndentTemplate", "headerRows", "height", "hideEmptyAgendaDays", "locale", "maxDate", "minDate", "monthHeaderTemplate", "monthsCount", "quickInfoOnSelectionEnd", "quickInfoTemplates", "readonly", "resourceHeaderTemplate", "resources", "rowAutoHeight", "selectedDate", "showHeaderBar", "showQuickInfo", "showTimeIndicator", "showWeekNumber", "showWeekend", "startHour", "timeFormat", "timeScale", "timezone", "timezoneDataSource", "toolbarItems", "views", "weekRule", "width", "workDays", "workHours"], outputs: ["actionBegin", "actionComplete", "actionFailure", "cellClick", "cellDoubleClick", "created", "dataBinding", "dataBound", "destroyed", "drag", "dragStart", "dragStop", "eventClick", "eventDoubleClick", "eventRendered", "hover", "moreEventsClick", "navigating", "popupClose", "popupOpen", "renderCell", "resizeStart", "resizeStop", "resizing", "select", "virtualScrollStart", "virtualScrollStop", "currentViewChange", "selectedDateChange"] }, { kind: "directive", type: i5$3.ViewDirective, selector: "e-views>e-view", inputs: ["allowVirtualScrolling", "cellHeaderTemplate", "cellTemplate", "dateFormat", "dateHeaderTemplate", "dateRangeTemplate", "dayHeaderTemplate", "displayDate", "displayName", "enableLazyLoading", "endHour", "eventTemplate", "firstDayOfWeek", "firstMonthOfYear", "group", "headerIndentTemplate", "headerRows", "interval", "isSelected", "maxEventsPerRow", "monthHeaderTemplate", "monthsCount", "numberOfWeeks", "option", "orientation", "readonly", "resourceHeaderTemplate", "showWeekNumber", "showWeekend", "startHour", "timeFormat", "timeScale", "workDays"] }, { kind: "directive", type: i5$3.ViewsDirective, selector: "ejs-schedule>e-views" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.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: DateRangePipe, name: "dateRange" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [swapAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ScheduleViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-schedule', animations: [swapAnimation], template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button [bizdocTooltip]=\"'PrevPage'|translate\" (click)=\"prev()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <span class=\"mat-body\">{{ starting | dateRange : ending : calendarOptions  }}</span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'NextPage'|translate\" (click)=\"next()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'View'|translate\" [matMenuTriggerFor]=\"view\"><mat-icon>view_agenda</mat-icon></button>\r\n  <mat-menu #view>\r\n    <button mat-menu-item (click)=\"changeView('WorkWeek')\">{{'WorkWeek'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Month')\">{{'Month'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Agenda')\">{{'Agenda'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('MonthAgenda')\">{{'MonthAgenda'|translate}}</button>\r\n    <!--<button mat-menu-item (click)=\"changeView('TimelineMonth')\">{{'TimelineMonth'|translate}}</button>-->\r\n    <button mat-menu-item (click)=\"changeView('Day')\">{{'Day'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Year')\">{{'Year'|translate}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"export()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<style scoped> \r\n  .e-popup-close {\r\n    display: none\r\n  }\r\n</style>\r\n<ejs-schedule #schedule [eventSettings]=\"eventSettings\" [currentView]=\"currentView\" [selectedDate]=\"selectedDate\"\r\n              [readonly]=\"true\" (navigating)=\"nav($event)\" height=\"100%\" [showHeaderBar]=\"false\"\r\n              (select)=\"select($event)\" class=\"flex\"\r\n              (eventClick)=\"eventClick($event)\" (dragStart)=\"drag($event)\" [@swape]=\"page\" class=\"flex\">\r\n  <e-views>\r\n    <e-view option=\"Month\"></e-view>\r\n    <e-view option=\"Day\"></e-view>\r\n    <e-view option=\"WorkWeek\"></e-view>\r\n    <e-view option=\"Agenda\"></e-view>\r\n    <e-view option=\"MonthAgenda\"></e-view>\r\n    <e-view option=\"TimelineMonth\"></e-view>\r\n    <e-view option=\"Year\"></e-view>\r\n  </e-views>\r\n</ejs-schedule>\r\n", styles: ["::ng-deep .e-dlg-container{display:none}::ng-deep .e-popup{display:none}:host{display:flex;height:100%;flex-direction:column}\n", " \n  .e-popup-close {\n    display: none\n  }\n"] }]
+            args: [{ selector: 'bizdoc-schedule', animations: [swapAnimation], template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button [bizdocTooltip]=\"'PrevPage'|translate\" (click)=\"prev()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <span class=\"mat-body\">{{ starting | dateRange : ending : calendarOptions  }}</span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'NextPage'|translate\" (click)=\"next()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'View'|translate\" [matMenuTriggerFor]=\"view\"><mat-icon>view_agenda</mat-icon></button>\r\n  <mat-menu #view>\r\n    <button mat-menu-item (click)=\"changeView('WorkWeek')\">{{'WorkWeek'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Month')\">{{'Month'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Agenda')\">{{'Agenda'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('MonthAgenda')\">{{'MonthAgenda'|translate}}</button>\r\n    <!--<button mat-menu-item (click)=\"changeView('TimelineMonth')\">{{'TimelineMonth'|translate}}</button>-->\r\n    <button mat-menu-item (click)=\"changeView('Day')\">{{'Day'|translate}}</button>\r\n    <button mat-menu-item (click)=\"changeView('Year')\">{{'Year'|translate}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"export()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<style scoped> \r\n  .e-popup-close {\r\n    display: none\r\n  }\r\n</style>\r\n<ejs-schedule #schedule [eventSettings]=\"eventSettings\" [currentView]=\"currentView\" [selectedDate]=\"selectedDate\"\r\n              [readonly]=\"true\" (navigating)=\"nav($event)\" height=\"100%\" [showHeaderBar]=\"false\"\r\n              (select)=\"select($event)\" class=\"flex\"\r\n              (eventClick)=\"eventClick($event)\" (dragStart)=\"drag($event)\" [@swape]=\"page\">\r\n  <e-views>\r\n    <e-view option=\"Month\"></e-view>\r\n    <e-view option=\"Day\"></e-view>\r\n    <e-view option=\"WorkWeek\"></e-view>\r\n    <e-view option=\"Agenda\"></e-view>\r\n    <e-view option=\"MonthAgenda\"></e-view>\r\n    <e-view option=\"TimelineMonth\"></e-view>\r\n    <e-view option=\"Year\"></e-view>\r\n  </e-views>\r\n</ejs-schedule>\r\n", styles: ["::ng-deep .e-dlg-container{display:none}::ng-deep .e-popup{display:none}:host{display:flex;height:100%;flex-direction:column}\n", " \n  .e-popup-close {\n    display: none\n  }\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: MailboxService }, { type: PanesRouter }, { type: PromptService }], propDecorators: { selectedDateChange: [{
                 type: Output
             }], selectedDate: [{
@@ -16370,15 +16357,12 @@ class SchedulerPaneComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SchedulerPaneComponent, deps: [{ token: PanesRouter }, { token: i0.ElementRef }, { token: TranslateService }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: SchedulerPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, ngImport: i0, template: `<bizdoc-schedule [selectedDate]=date (selectedDateChange)='change($event)'></bizdoc-schedule>`, isInline: true, dependencies: [{ kind: "component", type: ScheduleViewComponent, selector: "bizdoc-schedule", inputs: ["selectedDate"], outputs: ["selectedDateChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: SchedulerPaneComponent, selector: "ng-component", ngImport: i0, template: `<bizdoc-schedule [selectedDate]=date (selectedDateChange)='change($event)'></bizdoc-schedule>`, isInline: true, dependencies: [{ kind: "component", type: ScheduleViewComponent, selector: "bizdoc-schedule", inputs: ["selectedDate"], outputs: ["selectedDateChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SchedulerPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<bizdoc-schedule [selectedDate]=date (selectedDateChange)='change($event)'></bizdoc-schedule>`,
-                    host: {
-                        class: 'pane'
-                    }
+                    template: `<bizdoc-schedule [selectedDate]=date (selectedDateChange)='change($event)'></bizdoc-schedule>`
                 }]
         }], ctorParameters: () => [{ type: PanesRouter }, { type: i0.ElementRef }, { type: TranslateService }, { type: PaneRef }] });
 
@@ -17073,13 +17057,11 @@ class CubeMatrixPaneComponent extends CubeMatrixBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CubeMatrixPaneComponent, deps: [{ token: PaneRef }, { token: PanesRouter }, { token: TranslateService }, { token: CubeService }, { token: DatasourceService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CubeMatrixPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, viewQueries: [{ propertyName: "table", first: true, predicate: CubeMatrixComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"table.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"matrix.export()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <span class=\"divider\"></span>\n  @if (patterns && patterns.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"options\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\n  }\n  <mat-menu #options xPosition=\"before\">\n    <!-- patterns -->\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"aggregate(p)\">{{p.title}}</button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\n    <mat-icon>clear_all</mat-icon>\n  </button>\n  <!-- filters -->\n  @for (f of filters; track f) {\n    <button mat-button [matMenuTriggerFor]=\"fmenu\">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\n    <mat-menu #fmenu xPosition=\"before\">\n      @for (kv of sources[f.name] | async; track kv) {\n        <button mat-menu-item\n          (click)=\"filter(f.name, kv.key, kv.value)\">\n          {{kv.value}}\n        </button>\n      }\n    </mat-menu>\n  }\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-matrix [cube]=\"cube\" [xAxis]=\"xAxis\" [series]=\"series\" [indices]=\"indices\" [sum]=sum\n  [filters]=\"axes\" #matrix\n  [xAxisTotalLabel]=\"xAxisTotalLabel\"\n  [seriesTotalLabel]=\"seriesTotalLabel\"\n  [placeAt]=\"placeAt\"\n  [indexAt]=\"indexAt\"\n(loadingChange)=\"loading = $event\" (explore)='explore($event)'></bizdoc-cube-matrix>\n", styles: [":host{min-width:450px}:host ::ng-deep .cube-table thead{position:sticky;top:0}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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.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: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: ["seriesTotalLabel", "xAxisTotalLabel", "cube", "xAxis", "series", "indices", "indexAt", "placeAt", "scope", "sum", "filters", "loading", "interactive"], outputs: ["explore", "loadingChange"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TypeValuePipe, name: "typeValue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CubeMatrixPaneComponent, selector: "ng-component", viewQueries: [{ propertyName: "table", first: true, predicate: CubeMatrixComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"table.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"matrix.export()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <span class=\"divider\"></span>\n  @if (patterns && patterns.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"options\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\n  }\n  <mat-menu #options xPosition=\"before\">\n    <!-- patterns -->\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"aggregate(p)\">{{p.title}}</button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\n    <mat-icon>clear_all</mat-icon>\n  </button>\n  <!-- filters -->\n  @for (f of filters; track f) {\n    <button mat-button [matMenuTriggerFor]=\"fmenu\">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\n    <mat-menu #fmenu xPosition=\"before\">\n      @for (kv of sources[f.name] | async; track kv) {\n        <button mat-menu-item\n          (click)=\"filter(f.name, kv.key, kv.value)\">\n          {{kv.value}}\n        </button>\n      }\n    </mat-menu>\n  }\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-matrix [cube]=\"cube\" [xAxis]=\"xAxis\" [series]=\"series\" [indices]=\"indices\" [sum]=sum\n  [filters]=\"axes\" #matrix\n  [xAxisTotalLabel]=\"xAxisTotalLabel\"\n  [seriesTotalLabel]=\"seriesTotalLabel\"\n  [placeAt]=\"placeAt\"\n  [indexAt]=\"indexAt\"\n(loadingChange)=\"loading = $event\" (explore)='explore($event)'></bizdoc-cube-matrix>\n", styles: [":host{min-width:450px}:host ::ng-deep .cube-table thead{position:sticky;top:0}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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.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: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: ["seriesTotalLabel", "xAxisTotalLabel", "cube", "xAxis", "series", "indices", "indexAt", "placeAt", "scope", "sum", "filters", "loading", "interactive"], outputs: ["explore", "loadingChange"] }, { kind: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TypeValuePipe, name: "typeValue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CubeMatrixPaneComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"table.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"matrix.export()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <span class=\"divider\"></span>\n  @if (patterns && patterns.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"options\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\n  }\n  <mat-menu #options xPosition=\"before\">\n    <!-- patterns -->\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"aggregate(p)\">{{p.title}}</button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\n    <mat-icon>clear_all</mat-icon>\n  </button>\n  <!-- filters -->\n  @for (f of filters; track f) {\n    <button mat-button [matMenuTriggerFor]=\"fmenu\">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\n    <mat-menu #fmenu xPosition=\"before\">\n      @for (kv of sources[f.name] | async; track kv) {\n        <button mat-menu-item\n          (click)=\"filter(f.name, kv.key, kv.value)\">\n          {{kv.value}}\n        </button>\n      }\n    </mat-menu>\n  }\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-matrix [cube]=\"cube\" [xAxis]=\"xAxis\" [series]=\"series\" [indices]=\"indices\" [sum]=sum\n  [filters]=\"axes\" #matrix\n  [xAxisTotalLabel]=\"xAxisTotalLabel\"\n  [seriesTotalLabel]=\"seriesTotalLabel\"\n  [placeAt]=\"placeAt\"\n  [indexAt]=\"indexAt\"\n(loadingChange)=\"loading = $event\" (explore)='explore($event)'></bizdoc-cube-matrix>\n", styles: [":host{min-width:450px}:host ::ng-deep .cube-table thead{position:sticky;top:0}\n"] }]
+            args: [{ template: "<mat-toolbar class=\"nav-toolbar\">\n  <button mat-icon-button (click)=\"table.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\n    data-help=\"download\" (click)=\"matrix.export()\">\n    <mat-icon>save_alt</mat-icon>\n  </button>\n  <span class=\"divider\"></span>\n  @if (patterns && patterns.length) {\n    <button mat-icon-button [matMenuTriggerFor]=\"options\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\n  }\n  <mat-menu #options xPosition=\"before\">\n    <!-- patterns -->\n    @for (p of patterns; track p) {\n      <button mat-menu-item (click)=\"aggregate(p)\">{{p.title}}</button>\n    }\n  </mat-menu>\n  <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\n    <mat-icon>clear_all</mat-icon>\n  </button>\n  <!-- filters -->\n  @for (f of filters; track f) {\n    <button mat-button [matMenuTriggerFor]=\"fmenu\">{{values[f.name]| typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\n    <mat-menu #fmenu xPosition=\"before\">\n      @for (kv of sources[f.name] | async; track kv) {\n        <button mat-menu-item\n          (click)=\"filter(f.name, kv.key, kv.value)\">\n          {{kv.value}}\n        </button>\n      }\n    </mat-menu>\n  }\n</mat-toolbar>\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n<bizdoc-cube-matrix [cube]=\"cube\" [xAxis]=\"xAxis\" [series]=\"series\" [indices]=\"indices\" [sum]=sum\n  [filters]=\"axes\" #matrix\n  [xAxisTotalLabel]=\"xAxisTotalLabel\"\n  [seriesTotalLabel]=\"seriesTotalLabel\"\n  [placeAt]=\"placeAt\"\n  [indexAt]=\"indexAt\"\n(loadingChange)=\"loading = $event\" (explore)='explore($event)'></bizdoc-cube-matrix>\n", styles: [":host{min-width:450px}:host ::ng-deep .cube-table thead{position:sticky;top:0}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: PanesRouter }, { type: TranslateService }, { type: CubeService }, { type: DatasourceService }, { type: SessionService }], propDecorators: { table: [{
                 type: ViewChild,
                 args: [CubeMatrixComponent, { static: true }]
@@ -17677,15 +17659,12 @@ class NotificationsPaneComponent {
         pane.title = translate.get('Notifications');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NotificationsPaneComponent, deps: [{ token: PaneRef }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NotificationsPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, ngImport: i0, template: '<bizdoc-notifications-table></bizdoc-notifications-table>', isInline: true, dependencies: [{ kind: "component", type: NotificationsTableComponent, selector: "bizdoc-notifications-table" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: NotificationsPaneComponent, selector: "ng-component", ngImport: i0, template: '<bizdoc-notifications-table></bizdoc-notifications-table>', isInline: true, dependencies: [{ kind: "component", type: NotificationsTableComponent, selector: "bizdoc-notifications-table" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NotificationsPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '<bizdoc-notifications-table></bizdoc-notifications-table>',
-                    host: {
-                        class: 'pane'
-                    }
+                    template: '<bizdoc-notifications-table></bizdoc-notifications-table>'
                 }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: TranslateService }] });
 
@@ -17888,15 +17867,12 @@ class ContactsPaneComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContactsPaneComponent, deps: [{ token: PaneRef }, { token: TranslateService }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContactsPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, ngImport: i0, template: `<bizdoc-contacts (selected)="selected($event)"></bizdoc-contacts>`, isInline: true, dependencies: [{ kind: "component", type: ContactsComponent, selector: "bizdoc-contacts", outputs: ["selected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ContactsPaneComponent, selector: "ng-component", ngImport: i0, template: `<bizdoc-contacts (selected)="selected($event)"></bizdoc-contacts>`, isInline: true, dependencies: [{ kind: "component", type: ContactsComponent, selector: "bizdoc-contacts", outputs: ["selected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ContactsPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<bizdoc-contacts (selected)="selected($event)"></bizdoc-contacts>`,
-                    host: {
-                        class: 'pane'
-                    }
+                    template: `<bizdoc-contacts (selected)="selected($event)"></bizdoc-contacts>`
                 }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: TranslateService }, { type: PanesRouter }] });
 
@@ -17924,7 +17900,6 @@ class ConversationComponent {
         this._top = false;
         this._textChange = new Subject();
         this._destroy = new Subject();
-        this.trackBy = (_, item) => item.time;
         this._preserveDraft = config.chating && config.chating.preserveDraft;
     }
     ngOnInit() {
@@ -18053,11 +18028,11 @@ class ConversationComponent {
             window.localStorage.setItem(this.contact.id, this._input.text);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ConversationComponent, deps: [{ token: BIZDOC_CONFIG }, { token: ChatService }, { token: HubService }, { token: TranslateService }, { token: AccountService }, { token: PromptService }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ConversationComponent, selector: "bizdoc-chat-conversation", inputs: { contact: "contact" }, viewQueries: [{ propertyName: "_input", first: true, predicate: EditInputComponent, descendants: true, static: true }, { propertyName: "conversationElement", first: true, predicate: ["conversation"], descendants: true, read: ElementRef, static: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div (wheel)=\"onScroll($event)\" class=\"chat-conversation\" #conversation>\n  @for (item of items; track trackBy(i, item); let i = $index) {\n    <div class=\"chat-item\" [class.you]=\"item.userId!==contact.id\">\n      <div class=\"chat-text\" [innerHTML]=\"item.text|taggingHtml:item.resource\"></div>\n      @if (item.image) {\n        <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview(item)\" />\n      }\n      @if ((i===items.length - 1)||item.userId!==items[i+1].userId) {\n        <div class=\"chat-info\">\n          <small>\n            <bizdoc-identity-name [identity]=\"item.userId\" chating=\"none\">\n            </bizdoc-identity-name>\n          </small>\n          <span class=\"divider\"></span>\n          <small class=\"chat-time\" [bizdocTooltip]=\"item.time | amDateFormat: 'lll'\">{{item.time | amCalendar : null : CALENDAR_SPEC }}</small>\n        </div>\n      }\n    </div>\n    @if (watermark && ((i < items.length - 1 && items[i+1].time >\n  watermark && item.time<=watermark)||(i===items.length - 1 &&item.time<=watermark))) {\n  <div class=\"chat-watermark\">\n    <mat-icon [bizdocTooltip]=\"'Watched' | translate : (watermark | amTimeAgo)\">done_all</mat-icon>\n  </div>\n  }\n  }\n  @empty {\n  <bizdoc-none title=\"Chat\" icon=\"chat\"></bizdoc-none>\n  }\n</div>\n<div class=\"chat-typing\" [style.visibility]=\"typing ? 'visible':'hidden'\" [innerHTML]=\"(profile?.gender === 'Male' ? 'TypingMale' : profile?.gender === 'Female' ? 'TypingFemale' : 'Typing') | translate : (profile?.nick || profile?.name)\"></div>\n\n<bizdoc-edit-text (ok)=\"send($event)\" (focus)=\"onFocus()\"\n(focusout)=\"onBlur()\" [disabled]=\"sending\" (change)=\"_textChange.next()\"></bizdoc-edit-text>\n<ng-template #previewTemplate let-item=\"item\">\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;flex:1 auto;overflow-y:auto}.chat-conversation{-ms-flex:1 1 auto;-webkit-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 4px}\n"], dependencies: [{ kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ConversationComponent, selector: "bizdoc-chat-conversation", inputs: { contact: "contact" }, viewQueries: [{ propertyName: "_input", first: true, predicate: EditInputComponent, descendants: true, static: true }, { propertyName: "conversationElement", first: true, predicate: ["conversation"], descendants: true, read: ElementRef, static: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div (wheel)=\"onScroll($event)\" class=\"chat-conversation\" #conversation>\n  @for (item of items; track item.time; let i = $index) {\n    <div class=\"chat-item\" [class.you]=\"item.userId !== contact.id\">\n      <div class=\"chat-text\" [innerHTML]=\"item.text | taggingHtml:item.resource\"></div>\n      @if (item.image) {\n        <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview(item)\" />\n      }\n      @if ((i === items.length - 1) || item.userId !== items[i+1].userId) {\n        <div class=\"chat-info\">\n          <small>\n            <bizdoc-identity-name [identity]=\"item.userId\" chating=\"none\">\n            </bizdoc-identity-name>\n          </small>\n          <span class=\"divider\"></span>\n          <small class=\"chat-time\" [bizdocTooltip]=\"item.time | amDateFormat: 'lll'\">{{item.time | amCalendar : null : CALENDAR_SPEC }}</small>\n        </div>\n      }\n    </div>\n    @if (watermark && ((i < items.length - 1 && items[i+1].time >\n  watermark && item.time <= watermark) || (i === items.length - 1 &&item.time <= watermark))) {\n  <div class=\"chat-watermark\">\n    <mat-icon [bizdocTooltip]=\"'Watched' | translate : (watermark | amTimeAgo)\">done_all</mat-icon>\n  </div>\n  }\n  }\n  @empty {\n  <bizdoc-none title=\"Chat\" icon=\"chat\"></bizdoc-none>\n  }\n</div>\n<div class=\"chat-typing\" [style.visibility]=\"typing ? 'visible':'hidden'\" [innerHTML]=\"(profile?.gender === 'Male' ? 'TypingMale' : profile?.gender === 'Female' ? 'TypingFemale' : 'Typing') | translate : (profile?.nick || profile?.name)\"></div>\n\n<bizdoc-edit-text (ok)=\"send($event)\" (focus)=\"onFocus()\"\n(focusout)=\"onBlur()\" [disabled]=\"sending\" (change)=\"_textChange.next()\"></bizdoc-edit-text>\n<ng-template #previewTemplate let-item=\"item\">\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;flex:1 auto;overflow-y:auto}.chat-conversation{-ms-flex:1 1 auto;-webkit-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 4px}\n"], dependencies: [{ kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ConversationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-chat-conversation', template: "<div (wheel)=\"onScroll($event)\" class=\"chat-conversation\" #conversation>\n  @for (item of items; track trackBy(i, item); let i = $index) {\n    <div class=\"chat-item\" [class.you]=\"item.userId!==contact.id\">\n      <div class=\"chat-text\" [innerHTML]=\"item.text|taggingHtml:item.resource\"></div>\n      @if (item.image) {\n        <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview(item)\" />\n      }\n      @if ((i===items.length - 1)||item.userId!==items[i+1].userId) {\n        <div class=\"chat-info\">\n          <small>\n            <bizdoc-identity-name [identity]=\"item.userId\" chating=\"none\">\n            </bizdoc-identity-name>\n          </small>\n          <span class=\"divider\"></span>\n          <small class=\"chat-time\" [bizdocTooltip]=\"item.time | amDateFormat: 'lll'\">{{item.time | amCalendar : null : CALENDAR_SPEC }}</small>\n        </div>\n      }\n    </div>\n    @if (watermark && ((i < items.length - 1 && items[i+1].time >\n  watermark && item.time<=watermark)||(i===items.length - 1 &&item.time<=watermark))) {\n  <div class=\"chat-watermark\">\n    <mat-icon [bizdocTooltip]=\"'Watched' | translate : (watermark | amTimeAgo)\">done_all</mat-icon>\n  </div>\n  }\n  }\n  @empty {\n  <bizdoc-none title=\"Chat\" icon=\"chat\"></bizdoc-none>\n  }\n</div>\n<div class=\"chat-typing\" [style.visibility]=\"typing ? 'visible':'hidden'\" [innerHTML]=\"(profile?.gender === 'Male' ? 'TypingMale' : profile?.gender === 'Female' ? 'TypingFemale' : 'Typing') | translate : (profile?.nick || profile?.name)\"></div>\n\n<bizdoc-edit-text (ok)=\"send($event)\" (focus)=\"onFocus()\"\n(focusout)=\"onBlur()\" [disabled]=\"sending\" (change)=\"_textChange.next()\"></bizdoc-edit-text>\n<ng-template #previewTemplate let-item=\"item\">\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;flex:1 auto;overflow-y:auto}.chat-conversation{-ms-flex:1 1 auto;-webkit-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 4px}\n"] }]
+            args: [{ selector: 'bizdoc-chat-conversation', template: "<div (wheel)=\"onScroll($event)\" class=\"chat-conversation\" #conversation>\n  @for (item of items; track item.time; let i = $index) {\n    <div class=\"chat-item\" [class.you]=\"item.userId !== contact.id\">\n      <div class=\"chat-text\" [innerHTML]=\"item.text | taggingHtml:item.resource\"></div>\n      @if (item.image) {\n        <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview(item)\" />\n      }\n      @if ((i === items.length - 1) || item.userId !== items[i+1].userId) {\n        <div class=\"chat-info\">\n          <small>\n            <bizdoc-identity-name [identity]=\"item.userId\" chating=\"none\">\n            </bizdoc-identity-name>\n          </small>\n          <span class=\"divider\"></span>\n          <small class=\"chat-time\" [bizdocTooltip]=\"item.time | amDateFormat: 'lll'\">{{item.time | amCalendar : null : CALENDAR_SPEC }}</small>\n        </div>\n      }\n    </div>\n    @if (watermark && ((i < items.length - 1 && items[i+1].time >\n  watermark && item.time <= watermark) || (i === items.length - 1 &&item.time <= watermark))) {\n  <div class=\"chat-watermark\">\n    <mat-icon [bizdocTooltip]=\"'Watched' | translate : (watermark | amTimeAgo)\">done_all</mat-icon>\n  </div>\n  }\n  }\n  @empty {\n  <bizdoc-none title=\"Chat\" icon=\"chat\"></bizdoc-none>\n  }\n</div>\n<div class=\"chat-typing\" [style.visibility]=\"typing ? 'visible':'hidden'\" [innerHTML]=\"(profile?.gender === 'Male' ? 'TypingMale' : profile?.gender === 'Female' ? 'TypingFemale' : 'Typing') | translate : (profile?.nick || profile?.name)\"></div>\n\n<bizdoc-edit-text (ok)=\"send($event)\" (focus)=\"onFocus()\"\n(focusout)=\"onBlur()\" [disabled]=\"sending\" (change)=\"_textChange.next()\"></bizdoc-edit-text>\n<ng-template #previewTemplate let-item=\"item\">\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;flex:1 auto;overflow-y:auto}.chat-conversation{-ms-flex:1 1 auto;-webkit-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 4px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -18103,13 +18078,11 @@ class ConversationPaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ConversationPaneComponent, deps: [{ token: PaneRef }, { token: TranslateService }, { token: AccountService }, { token: ChatService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ConversationPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, ngImport: i0, template: '<bizdoc-chat-conversation [contact]=contact></bizdoc-chat-conversation>', isInline: true, styles: [":host{min-width:320px}\n"], dependencies: [{ kind: "component", type: ConversationComponent, selector: "bizdoc-chat-conversation", inputs: ["contact"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: ConversationPaneComponent, selector: "ng-component", ngImport: i0, template: '<bizdoc-chat-conversation [contact]=contact></bizdoc-chat-conversation>', isInline: true, styles: [":host{display:flex;min-width:320px}\n"], dependencies: [{ kind: "component", type: ConversationComponent, selector: "bizdoc-chat-conversation", inputs: ["contact"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ConversationPaneComponent, decorators: [{
             type: Component,
-            args: [{ template: '<bizdoc-chat-conversation [contact]=contact></bizdoc-chat-conversation>', host: {
-                        class: 'pane'
-                    }, styles: [":host{min-width:320px}\n"] }]
+            args: [{ template: '<bizdoc-chat-conversation [contact]=contact></bizdoc-chat-conversation>', styles: [":host{display:flex;min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: TranslateService }, { type: AccountService }, { type: ChatService }, { type: SessionService }] });
 
 class WidgetRef {
@@ -18307,11 +18280,11 @@ class DashboardPaneComponent {
         pane.title = translate.get('Dashboard');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DashboardPaneComponent, deps: [{ token: PaneRef }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: DashboardPaneComponent, selector: "ng-component", host: { classAttribute: "pane" }, ngImport: i0, template: '<bizdoc-dashboard></bizdoc-dashboard>', isInline: true, styles: [":host{min-width:1200px}\n"], dependencies: [{ kind: "component", type: DashboardComponent, selector: "bizdoc-dashboard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: DashboardPaneComponent, selector: "ng-component", ngImport: i0, template: '<bizdoc-dashboard></bizdoc-dashboard>', isInline: true, styles: [":host{min-width:1200px}\n"], dependencies: [{ kind: "component", type: DashboardComponent, selector: "bizdoc-dashboard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DashboardPaneComponent, decorators: [{
             type: Component,
-            args: [{ template: '<bizdoc-dashboard></bizdoc-dashboard>', host: { class: 'pane' }, styles: [":host{min-width:1200px}\n"] }]
+            args: [{ template: '<bizdoc-dashboard></bizdoc-dashboard>', styles: [":host{min-width:1200px}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: TranslateService }] });
 
 class DocumentViewRef {
@@ -18547,6 +18520,7 @@ class OptionsService {
             positionStrategy: position,
             hasBackdrop: true,
             disposeOnNavigation: true,
+            panelClass: 'home-panel',
             backdropClass: 'cdk-overlay-dark-backdrop',
             direction: this._dir.value
         });
@@ -18792,11 +18766,11 @@ class QuickOptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: QuickOptionsComponent, deps: [{ token: PromptService }, { token: i1$2.FormBuilder }, { token: GuideService }, { token: PopupRef, optional: true }, { token: HubService }, { token: SessionService }, { token: i2$2.MatDialog }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: QuickOptionsComponent, selector: "bizdoc-quick-options", ngImport: i0, template: "<div class=\"column\">\n  <div class=\"profile-name\">\n    <span class=\"mat-headline-6\">\n      @if (profile.byName) {\n      {{profile.byName}} \\\n      }\n      {{profile.name}}\n    </span>\n  </div>\n  <mat-divider />\n  <bizdoc-options section=\"notifications\"></bizdoc-options>\n  <mat-divider />\n  <!--keys-->\n  <div *ngTemplateOutlet=\"keysTmpl\"></div>\n  <!--themes-->\n  @if (themes.length > 1) {\n  <div class=\"row center\">\n    @for (t of themes; track t) {\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\"></button>\n    }\n  </div>\n  }\n</div>\n<!--guide-->\n<mat-nav-list role=\"list\">\n  <mat-divider></mat-divider>\n  <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\n  @for (g of guides; track g) {\n  <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\n  }\n</mat-nav-list>\n<mat-divider></mat-divider>\n<!--footer-->\n<div class=\"row\">\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\n    {{currentLanguage | translate}}\n    <mat-icon>arrow_drop_down</mat-icon>\n    <!--'ChangeLanguage'-->\n  </button>\n  <mat-menu #language>\n    @for (l of languages; track l) {\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\n    }\n  </mat-menu>\n  @if (online) {\n  <button mat-button [matMenuTriggerFor]=\"availability\">\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  }\n  <mat-menu #availability>\n    @for (m of modes; track m) {\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\n  @if (!online) {\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\n    <mat-icon>wifi_off</mat-icon>\n  </button>\n  }\n</div>\n<!---->\n<ng-template #keysTmpl>\n  <dl class=\"keys mat-body-2\">\n    <dt>Alt+n</dt>\n    <dd>{{'AltNHelp'|translate}}</dd>\n    <dt>Ctrl+s</dt>\n    <dd>{{'CtrlSHelp'|translate}}</dd>\n    <dt>Alt+s</dt>\n    <dd>{{'AltSHelp'|translate}}</dd>\n    <dt>Alt+q</dt>\n    <dd>{{'AltQHelp'|translate}}</dd>\n    <dt>Alt+a</dt>\n    <dd>{{'AltAHelp'|translate}}</dd>\n    <dt>Alt+h</dt>\n    <dd>{{'AltHHelp'|translate}}</dd>\n    <dt>Ctrl+.</dt>\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\n  </dl>\n</ng-template>\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}button{font-weight:300!important}.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}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OptionsComponent, selector: "bizdoc-options", inputs: ["section"] }, { kind: "directive", type: i5$2.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: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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.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.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: QuickOptionsComponent, selector: "bizdoc-quick-options", ngImport: i0, template: "<div class=\"column\">\n  <div class=\"profile-name\">\n    <span class=\"mat-headline-6\">\n      @if (profile.byName) {\n      {{profile.byName}} \\\n      }\n      {{profile.name}}\n    </span>\n  </div>\n  <mat-divider />\n  <bizdoc-options section=\"notifications\"></bizdoc-options>\n  <mat-divider />\n  <!--keys-->\n  <div *ngTemplateOutlet=\"keysTmpl\"></div>\n  <!--themes-->\n  @if (themes.length > 1) {\n  <div class=\"row center\">\n    @for (t of themes; track t) {\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>\n    }\n  </div>\n  }\n</div>\n<!--guide-->\n<mat-nav-list role=\"list\">\n  <mat-divider></mat-divider>\n  <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\n  @for (g of guides; track g) {\n  <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\n  }\n</mat-nav-list>\n<mat-divider></mat-divider>\n<!--footer-->\n<div class=\"row\">\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\n    {{currentLanguage | translate}}\n    <mat-icon>arrow_drop_down</mat-icon>\n    <!--'ChangeLanguage'-->\n  </button>\n  <mat-menu #language>\n    @for (l of languages; track l) {\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\n    }\n  </mat-menu>\n  @if (online) {\n  <button mat-button [matMenuTriggerFor]=\"availability\">\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  }\n  <mat-menu #availability>\n    @for (m of modes; track m) {\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\n  @if (!online) {\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\n    <mat-icon>wifi_off</mat-icon>\n  </button>\n  }\n</div>\n<!---->\n<ng-template #keysTmpl>\n  <dl class=\"keys mat-body-2\">\n    <dt>Alt+n</dt>\n    <dd>{{'AltNHelp'|translate}}</dd>\n    <dt>Ctrl+s</dt>\n    <dd>{{'CtrlSHelp'|translate}}</dd>\n    <dt>Alt+s</dt>\n    <dd>{{'AltSHelp'|translate}}</dd>\n    <dt>Alt+q</dt>\n    <dd>{{'AltQHelp'|translate}}</dd>\n    <dt>Alt+a</dt>\n    <dd>{{'AltAHelp'|translate}}</dd>\n    <dt>Alt+h</dt>\n    <dd>{{'AltHHelp'|translate}}</dd>\n    <dt>Ctrl+.</dt>\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\n  </dl>\n</ng-template>\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}button{font-weight:300!important}.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}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OptionsComponent, selector: "bizdoc-options", inputs: ["section"] }, { kind: "directive", type: i5$2.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: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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.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.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: QuickOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-quick-options', template: "<div class=\"column\">\n  <div class=\"profile-name\">\n    <span class=\"mat-headline-6\">\n      @if (profile.byName) {\n      {{profile.byName}} \\\n      }\n      {{profile.name}}\n    </span>\n  </div>\n  <mat-divider />\n  <bizdoc-options section=\"notifications\"></bizdoc-options>\n  <mat-divider />\n  <!--keys-->\n  <div *ngTemplateOutlet=\"keysTmpl\"></div>\n  <!--themes-->\n  @if (themes.length > 1) {\n  <div class=\"row center\">\n    @for (t of themes; track t) {\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\"></button>\n    }\n  </div>\n  }\n</div>\n<!--guide-->\n<mat-nav-list role=\"list\">\n  <mat-divider></mat-divider>\n  <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\n  @for (g of guides; track g) {\n  <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\n  }\n</mat-nav-list>\n<mat-divider></mat-divider>\n<!--footer-->\n<div class=\"row\">\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\n    {{currentLanguage | translate}}\n    <mat-icon>arrow_drop_down</mat-icon>\n    <!--'ChangeLanguage'-->\n  </button>\n  <mat-menu #language>\n    @for (l of languages; track l) {\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\n    }\n  </mat-menu>\n  @if (online) {\n  <button mat-button [matMenuTriggerFor]=\"availability\">\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  }\n  <mat-menu #availability>\n    @for (m of modes; track m) {\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\n  @if (!online) {\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\n    <mat-icon>wifi_off</mat-icon>\n  </button>\n  }\n</div>\n<!---->\n<ng-template #keysTmpl>\n  <dl class=\"keys mat-body-2\">\n    <dt>Alt+n</dt>\n    <dd>{{'AltNHelp'|translate}}</dd>\n    <dt>Ctrl+s</dt>\n    <dd>{{'CtrlSHelp'|translate}}</dd>\n    <dt>Alt+s</dt>\n    <dd>{{'AltSHelp'|translate}}</dd>\n    <dt>Alt+q</dt>\n    <dd>{{'AltQHelp'|translate}}</dd>\n    <dt>Alt+a</dt>\n    <dd>{{'AltAHelp'|translate}}</dd>\n    <dt>Alt+h</dt>\n    <dd>{{'AltHHelp'|translate}}</dd>\n    <dt>Ctrl+.</dt>\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\n  </dl>\n</ng-template>\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}button{font-weight:300!important}.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}\n"] }]
+            args: [{ selector: 'bizdoc-quick-options', template: "<div class=\"column\">\n  <div class=\"profile-name\">\n    <span class=\"mat-headline-6\">\n      @if (profile.byName) {\n      {{profile.byName}} \\\n      }\n      {{profile.name}}\n    </span>\n  </div>\n  <mat-divider />\n  <bizdoc-options section=\"notifications\"></bizdoc-options>\n  <mat-divider />\n  <!--keys-->\n  <div *ngTemplateOutlet=\"keysTmpl\"></div>\n  <!--themes-->\n  @if (themes.length > 1) {\n  <div class=\"row center\">\n    @for (t of themes; track t) {\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>\n    }\n  </div>\n  }\n</div>\n<!--guide-->\n<mat-nav-list role=\"list\">\n  <mat-divider></mat-divider>\n  <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\n  @for (g of guides; track g) {\n  <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\n  }\n</mat-nav-list>\n<mat-divider></mat-divider>\n<!--footer-->\n<div class=\"row\">\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\n    {{currentLanguage | translate}}\n    <mat-icon>arrow_drop_down</mat-icon>\n    <!--'ChangeLanguage'-->\n  </button>\n  <mat-menu #language>\n    @for (l of languages; track l) {\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\n    }\n  </mat-menu>\n  @if (online) {\n  <button mat-button [matMenuTriggerFor]=\"availability\">\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n  }\n  <mat-menu #availability>\n    @for (m of modes; track m) {\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\n    }\n  </mat-menu>\n  <span class=\"divider\"></span>\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\n  @if (!online) {\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\n    <mat-icon>wifi_off</mat-icon>\n  </button>\n  }\n</div>\n<!---->\n<ng-template #keysTmpl>\n  <dl class=\"keys mat-body-2\">\n    <dt>Alt+n</dt>\n    <dd>{{'AltNHelp'|translate}}</dd>\n    <dt>Ctrl+s</dt>\n    <dd>{{'CtrlSHelp'|translate}}</dd>\n    <dt>Alt+s</dt>\n    <dd>{{'AltSHelp'|translate}}</dd>\n    <dt>Alt+q</dt>\n    <dd>{{'AltQHelp'|translate}}</dd>\n    <dt>Alt+a</dt>\n    <dd>{{'AltAHelp'|translate}}</dd>\n    <dt>Alt+h</dt>\n    <dd>{{'AltHHelp'|translate}}</dd>\n    <dt>Ctrl+.</dt>\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\n  </dl>\n</ng-template>\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}button{font-weight:300!important}.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}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: i1$2.FormBuilder }, { type: GuideService }, { type: PopupRef, decorators: [{
                     type: Optional
                 }] }, { type: HubService }, { type: SessionService }, { type: i2$2.MatDialog }, { type: undefined, decorators: [{
@@ -18933,7 +18907,7 @@ class SlotsComponent {
         this._title = _title;
         this._injector = _injector;
         this.dialogChange = new EventEmitter();
-        this.titleAnimation = 0;
+        this.titleVariant = 0;
         this.panes = [];
         this.tabs = [];
         this._selectedTabIndex = -1;
@@ -19395,7 +19369,7 @@ class SlotsComponent {
             }
         });
         if (pane.mode === 'pane')
-            this.titleAnimation++;
+            this.titleVariant++;
         this._cd.detectChanges();
     }
     /** */
@@ -19570,7 +19544,7 @@ class SlotsComponent {
         if (position === undefined)
             position = this.panes.length;
         this.panes.push(pane);
-        this.titleAnimation++;
+        this.titleVariant++;
         this._cd.detectChanges();
         const evt = new NavigationStart(pane);
         this._router._events$.next(evt);
@@ -19906,7 +19880,7 @@ class SlotsComponent {
         this._resize();
     }
     enableNavigationArrows(_) {
-        const container = this._panesContainerRef.element.nativeElement, scrollLeft = Math.round(container.scrollLeft) + 1;
+        const container = this._panesContainerRef.element.nativeElement, scrollLeft = Math.floor(container.scrollLeft) + 1;
         this.next = this._rtl ? container.clientWidth - scrollLeft < container.scrollWidth :
             scrollLeft + container.clientWidth < container.scrollWidth;
         this.prev = this._rtl ? scrollLeft < 1 : scrollLeft > 1;
@@ -19971,7 +19945,7 @@ class SlotsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", 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: "17.2.1", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panning class=\"panes\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n<!--next-->\n  @if (next) {\n<div class=\"scroll-arrow forward\">\n  <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n     (click)=\"scrollBy(400)\">\n    arrow_forward_ios\n  </i>\n</div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabing [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\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>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{display:block;height:inherit;-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto}.panes .pane-content .pane{flex-grow:1}.panes .pane-separator{width:8px}.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}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::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}.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{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$5.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$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i5$2.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: "17.2.1", type: SlotsComponent, 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\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  <!--panes-->\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n  <!--next-->\n  @if (next) {\n  <div class=\"scroll-arrow forward\">\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n       (click)=\"scrollBy(400)\">\n      arrow_forward_ios\n    </i>\n  </div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\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>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{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 [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::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}.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$5.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$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i5$2.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,
@@ -19989,7 +19963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div #panning class=\"panes\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n<!--next-->\n  @if (next) {\n<div class=\"scroll-arrow forward\">\n  <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n     (click)=\"scrollBy(400)\">\n    arrow_forward_ios\n  </i>\n</div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabing [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\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>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{display:block;height:inherit;-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto}.panes .pane-content .pane{flex-grow:1}.panes .pane-separator{width:8px}.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}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::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}.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{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
+                    ], template: "<div #panesEl class=\"panes\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  <!--panes-->\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n  <!--next-->\n  @if (next) {\n  <div class=\"scroll-arrow forward\">\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n       (click)=\"scrollBy(400)\">\n      arrow_forward_ios\n    </i>\n  </div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\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>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{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 [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::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}.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]
@@ -19997,10 +19971,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Output
             }], _panesContainerRef: [{
                 type: ViewChild,
-                args: ['panning', { read: ViewContainerRef, static: true }]
+                args: ['panesEl', { read: ViewContainerRef, static: true }]
             }], _tabsElement: [{
                 type: ViewChild,
-                args: ['tabing']
+                args: ['tabsEl']
             }], _scrollable: [{
                 type: ViewChild,
                 args: [CdkScrollable, { static: true }]
@@ -20820,11 +20794,11 @@ class HomeComponent extends HomeBase {
         item.instance.onPick();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: HomeComponent, deps: [{ token: PanesRouter }, { token: SearchService }, { token: MailboxService }, { token: Popup }, { token: PromptService }, { token: GuideService }, { token: i0.Injector }, { token: SessionService }, { token: HubService }, { token: TranslateService }, { token: i3.MatSnackBar }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: HomeComponent, selector: "bizdoc-home", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "mat-app-background" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "main", first: true, predicate: SlotsComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["input"], descendants: true, read: MatAutocompleteTrigger }], usesInheritance: true, ngImport: i0, template: "<!-- menu -->\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"submenu\"\n     [class.dialog]=\"dialog\"\n     class=\"nav-menu row\">\n  <!--[class.loading]=\"loading\"-->\n  <div class=\"column\">\n    <div>\n      @if (forms.length) {\n      <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\n        <button mat-raised-button\n                [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                (click)=\"opennew()\" [disabled]=\"creating\"\n                [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\n          <mat-icon>add</mat-icon>\n          <span class=\"nav-label\">{{'Compose'| translate}}</span>\n        </button>\n      </div>\n      }\n      <mat-nav-list>\n        <mat-list-item [attr.aria-label]=\"'Dashboard' | translate\"\n                       (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\n                       data-help=\"dashboard\"\n                       [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\n        </mat-list-item>\n        <mat-list-item (click)=\"mails()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       [class.active]=\"activeMenu === 'mailbox'\"\n                       [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"profile.inboxCount < 1\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\n        </mat-list-item>\n        @if (schedulerEnabled) {\n        <mat-list-item [attr.aria-label]=\"'Scheduler' | translate\"\n                       (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\n                       [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (chatEnabled) {\n        <mat-list-item data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\n                       (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\n                       [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\n        </mat-list-item>\n        }\n        <mat-divider></mat-divider>\n        @if (enableAnalysis && profile.cubes.length) {\n        <mat-list-item (click)=\"opensubmenu('cube')\"\n                       [class.active]=\"activeMenu === 'cube'\"\n                       [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\n          <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (profile.reports.length) {\n        <mat-list-item (click)=\"opensubmenu('reports')\"\n                       [class.active]=\"activeMenu === 'reports'\"\n                       [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\n          <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (sysAdmin) {\n        <mat-divider></mat-divider>\n        <mat-list-item (click)=\"opensubmenu('admin')\"\n                       [class.active]=\"activeMenu === 'admin'\"\n                       [bizdocTooltip]=\"'System'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\n          <mat-icon matListItemIcon>device_hub</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\n        </mat-list-item>\n        }\n      </mat-nav-list>\n    </div>\n    <span class=\"divider\"></span>\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\n    <!--@animate-->\n    <div class=\"sign-in\">\n      <button mat-icon-button data-help=\"sign-in\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\n      </button>\n      <span class=\"divider\"></span>\n      <button mat-icon-button [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- -->\n  @if (submenu) {\n  <div class=\"sub-menu\" (mouseleave)=\"collapsesubmenu()\" [@submenu]=\"submenuMode\" (@submenu.done)=\"resize()\">\n    @if (submenu !== 'new') {\n    <div class=\"action\">\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\n    </div>\n    }\n    @switch (submenu) {\n    @case ('new') {\n    <bizdoc-new-menu (change)=\"closesubmenu()\"></bizdoc-new-menu>\n    }\n    @case ('mailbox') {\n    <bizdoc-folders-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-folders-menu>\n    }\n    @case ('admin') {\n    <bizdoc-admin-menu [collapsed]=\"submenuMode === 'shrink'\"></bizdoc-admin-menu>\n    }\n    @case ('reports') {\n    <bizdoc-reports-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-reports-menu>\n    }\n    @case ('cube') {\n    <bizdoc-cube-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-cube-menu>\n    }\n    }\n  </div>\n  }\n  @if (dialog) {\n  <div class=\"backdrop\"></div>\n  }\n</div>\n<div class=\"main\">\n  <!-- title -->\n  <div class=\"row header\" [@title]=\"main.titleAnimation\">\n    <h1>\n      @if (main.swap) {\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\n      }\n      @for (p of main.panes; track p; let first = $first) {\n      @if (!first) {\n      <span class=\"breadcrumbs\">\\</span>\n      }\n      {{p.title}}\n      }\n      @if (main.panes[0]?.guide) {\n      <button mat-icon-button (click)=\"guide(main.panes[0].guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\n      }\n    </h1>\n    <span class=\"divider\">\n    </span>\n    <!--search-->\n    <input type=\"text\"\n           [@search]=\"searching\"\n           (@search.done)=\"searching && focus()\"\n           #input\n           (keydown.escape)=\"collapse($event)\"\n           [attr.aria-label]=\"'Search'|translate\"\n           [formControl]=\"search\"\n           [matAutocomplete]=\"auto\" class=\"search-box\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\n      @for (o of results | async; track o) {\n       <mat-option [value]=\"o\">\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\n      </mat-option>\n      }\n    </mat-autocomplete>\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\n    <!--tool-->\n    <button mat-icon-button (click)=\"notifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\n            [attr.aria-label]=\"'Notifications'| translate\"\n            data-help=\"notifications\">\n      <mat-icon matListItemIcon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\"\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\n                [class.filled]=\"profile.notificationsCount\">\n        {{profile.options.notifications.active ? 'notifications':'notifications_off'}}\n      </mat-icon>\n    </button>\n  </div>\n\n  <bizdoc-panes-outlet (dialogChange)=\"dialog = $event\" #main></bizdoc-panes-outlet>\n</div>\n", styles: [":host{display:flex;position:absolute;height:100%;width:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{height:100%;z-index:1}.nav-menu .sub-menu{min-width:200px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-basis:100%}.main .header{align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i5$2.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.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$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: 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: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: ["collapsed"] }, { kind: "component", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: ["dialogChange"] }, { kind: "component", type: CubeMenuComponent, selector: "bizdoc-cube-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ReportsMenuComponent, selector: "bizdoc-reports-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: FoldersMenuComponent, selector: "bizdoc-folders-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: ["change"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [submenuAnimation, panesTitleAnimation, searchAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: HomeComponent, selector: "bizdoc-home", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "mat-app-background" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "main", first: true, predicate: SlotsComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["input"], descendants: true, read: MatAutocompleteTrigger }], usesInheritance: true, ngImport: i0, template: "<!-- menu -->\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"submenu\"\n     [class.dialog]=\"dialog\"\n     class=\"nav-menu row\">\n  <div class=\"column\">\n    <div>\n      @if (forms.length) {\n      <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\n        <button mat-raised-button\n                [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                (click)=\"opennew()\" [disabled]=\"creating\"\n                [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\n          <mat-icon>add</mat-icon>\n          <span class=\"nav-label\">{{'Compose'| translate}}</span>\n        </button>\n      </div>\n      }\n      <mat-nav-list>\n        <mat-list-item [attr.aria-label]=\"'Dashboard' | translate\"\n                       (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\n                       data-help=\"dashboard\"\n                       [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\n        </mat-list-item>\n        <mat-list-item (click)=\"mails()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       [class.active]=\"activeMenu === 'mailbox'\"\n                       [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"profile.inboxCount < 1\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\n        </mat-list-item>\n        @if (schedulerEnabled) {\n        <mat-list-item [attr.aria-label]=\"'Scheduler' | translate\"\n                       (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\n                       [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (chatEnabled) {\n        <mat-list-item data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\n                       (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\n                       [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\n        </mat-list-item>\n        }\n        <mat-divider></mat-divider>\n        @if (enableAnalysis && profile.cubes.length) {\n        <mat-list-item (click)=\"opensubmenu('cube')\"\n                       [class.active]=\"activeMenu === 'cube'\"\n                       [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\n          <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (profile.reports.length) {\n        <mat-list-item (click)=\"opensubmenu('reports')\"\n                       [class.active]=\"activeMenu === 'reports'\"\n                       [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\n          <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (sysAdmin) {\n        <mat-divider></mat-divider>\n        <mat-list-item (click)=\"opensubmenu('admin')\"\n                       [class.active]=\"activeMenu === 'admin'\"\n                       [bizdocTooltip]=\"'System'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\n          <mat-icon matListItemIcon>device_hub</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\n        </mat-list-item>\n        }\n      </mat-nav-list>\n    </div>\n    <span class=\"divider\"></span>\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\n    <div class=\"sign-in\">\n      <button mat-icon-button data-help=\"sign-in\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\n      </button>\n      <span class=\"divider\"></span>\n      <button mat-icon-button [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- -->\n  @if (submenu) {\n  <div class=\"sub-menu\" (mouseleave)=\"collapsesubmenu()\" [@submenu]=\"submenuMode\" (@submenu.done)=\"resize()\">\n    @if (submenu !== 'new') {\n    <div class=\"action\">\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\n    </div>\n    }\n    @switch (submenu) {\n    @case ('new') {\n    <bizdoc-new-menu (change)=\"closesubmenu()\"></bizdoc-new-menu>\n    }\n    @case ('mailbox') {\n    <bizdoc-folders-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-folders-menu>\n    }\n    @case ('admin') {\n    <bizdoc-admin-menu [collapsed]=\"submenuMode === 'shrink'\"></bizdoc-admin-menu>\n    }\n    @case ('reports') {\n    <bizdoc-reports-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-reports-menu>\n    }\n    @case ('cube') {\n    <bizdoc-cube-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-cube-menu>\n    }\n    }\n  </div>\n  }\n  @if (dialog) {\n  <div class=\"backdrop\"></div>\n  }\n</div>\n<div class=\"main\">\n  <!-- title -->\n  <div class=\"row header\" [@title]=\"main.titleVariant\">\n    <h1>\n      @if (main.swap) {\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\n      }\n      @for (p of main.panes; track p; let first = $first) {\n      @if (!first) {\n      <span class=\"breadcrumbs\">\\</span>\n      }\n      {{p.title}}\n      }\n      @if (main.panes[0]?.guide) {\n      <button mat-icon-button (click)=\"guide(main.panes[0].guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\n      }\n    </h1>\n    <span class=\"divider\">\n    </span>\n    <!--search-->\n    <input type=\"text\"\n           [@search]=\"searching\"\n           (@search.done)=\"searching && focus()\"\n           #input\n           (keydown.escape)=\"collapse($event)\"\n           [attr.aria-label]=\"'Search'|translate\"\n           [formControl]=\"search\"\n           [matAutocomplete]=\"auto\" class=\"search-box\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\n      @for (o of results | async; track o) {\n      <mat-option [value]=\"o\">\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\n      </mat-option>\n      }\n    </mat-autocomplete>\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\n    <!--notifications-->\n    <button mat-icon-button (click)=\"notifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\n            [attr.aria-label]=\"'Notifications'| translate\"\n            data-help=\"notifications\">\n      <mat-icon matListItemIcon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\"\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\n                [class.filled]=\"profile.notificationsCount\">\n        {{profile.options.notifications.active ? 'notifications':'notifications_off'}}\n      </mat-icon>\n    </button>\n  </div>\n  <!--panes & tabs-->\n  <bizdoc-panes-outlet (dialogChange)=\"dialog = $event\" #main></bizdoc-panes-outlet>\n</div>\n", styles: [":host{display:flex;height:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{z-index:1}.nav-menu .sub-menu{min-width:200px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex:1;overflow-x:hidden;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.main .header{align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i5$2.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.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$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: 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: "directive", type: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: ["collapsed"] }, { kind: "component", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: ["dialogChange"] }, { kind: "component", type: CubeMenuComponent, selector: "bizdoc-cube-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ReportsMenuComponent, selector: "bizdoc-reports-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: FoldersMenuComponent, selector: "bizdoc-folders-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: ["change"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [submenuAnimation, panesTitleAnimation, searchAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: HomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-home', host: { class: 'mat-app-background' }, animations: [submenuAnimation, panesTitleAnimation, searchAnimation], template: "<!-- menu -->\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"submenu\"\n     [class.dialog]=\"dialog\"\n     class=\"nav-menu row\">\n  <!--[class.loading]=\"loading\"-->\n  <div class=\"column\">\n    <div>\n      @if (forms.length) {\n      <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\n        <button mat-raised-button\n                [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                (click)=\"opennew()\" [disabled]=\"creating\"\n                [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\n          <mat-icon>add</mat-icon>\n          <span class=\"nav-label\">{{'Compose'| translate}}</span>\n        </button>\n      </div>\n      }\n      <mat-nav-list>\n        <mat-list-item [attr.aria-label]=\"'Dashboard' | translate\"\n                       (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\n                       data-help=\"dashboard\"\n                       [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\n        </mat-list-item>\n        <mat-list-item (click)=\"mails()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       [class.active]=\"activeMenu === 'mailbox'\"\n                       [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"profile.inboxCount < 1\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\n        </mat-list-item>\n        @if (schedulerEnabled) {\n        <mat-list-item [attr.aria-label]=\"'Scheduler' | translate\"\n                       (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\n                       [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (chatEnabled) {\n        <mat-list-item data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\n                       (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\n                       [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\n        </mat-list-item>\n        }\n        <mat-divider></mat-divider>\n        @if (enableAnalysis && profile.cubes.length) {\n        <mat-list-item (click)=\"opensubmenu('cube')\"\n                       [class.active]=\"activeMenu === 'cube'\"\n                       [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\n          <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (profile.reports.length) {\n        <mat-list-item (click)=\"opensubmenu('reports')\"\n                       [class.active]=\"activeMenu === 'reports'\"\n                       [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\n          <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (sysAdmin) {\n        <mat-divider></mat-divider>\n        <mat-list-item (click)=\"opensubmenu('admin')\"\n                       [class.active]=\"activeMenu === 'admin'\"\n                       [bizdocTooltip]=\"'System'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\n          <mat-icon matListItemIcon>device_hub</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\n        </mat-list-item>\n        }\n      </mat-nav-list>\n    </div>\n    <span class=\"divider\"></span>\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\n    <!--@animate-->\n    <div class=\"sign-in\">\n      <button mat-icon-button data-help=\"sign-in\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\n      </button>\n      <span class=\"divider\"></span>\n      <button mat-icon-button [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- -->\n  @if (submenu) {\n  <div class=\"sub-menu\" (mouseleave)=\"collapsesubmenu()\" [@submenu]=\"submenuMode\" (@submenu.done)=\"resize()\">\n    @if (submenu !== 'new') {\n    <div class=\"action\">\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\n    </div>\n    }\n    @switch (submenu) {\n    @case ('new') {\n    <bizdoc-new-menu (change)=\"closesubmenu()\"></bizdoc-new-menu>\n    }\n    @case ('mailbox') {\n    <bizdoc-folders-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-folders-menu>\n    }\n    @case ('admin') {\n    <bizdoc-admin-menu [collapsed]=\"submenuMode === 'shrink'\"></bizdoc-admin-menu>\n    }\n    @case ('reports') {\n    <bizdoc-reports-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-reports-menu>\n    }\n    @case ('cube') {\n    <bizdoc-cube-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-cube-menu>\n    }\n    }\n  </div>\n  }\n  @if (dialog) {\n  <div class=\"backdrop\"></div>\n  }\n</div>\n<div class=\"main\">\n  <!-- title -->\n  <div class=\"row header\" [@title]=\"main.titleAnimation\">\n    <h1>\n      @if (main.swap) {\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\n      }\n      @for (p of main.panes; track p; let first = $first) {\n      @if (!first) {\n      <span class=\"breadcrumbs\">\\</span>\n      }\n      {{p.title}}\n      }\n      @if (main.panes[0]?.guide) {\n      <button mat-icon-button (click)=\"guide(main.panes[0].guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\n      }\n    </h1>\n    <span class=\"divider\">\n    </span>\n    <!--search-->\n    <input type=\"text\"\n           [@search]=\"searching\"\n           (@search.done)=\"searching && focus()\"\n           #input\n           (keydown.escape)=\"collapse($event)\"\n           [attr.aria-label]=\"'Search'|translate\"\n           [formControl]=\"search\"\n           [matAutocomplete]=\"auto\" class=\"search-box\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\n      @for (o of results | async; track o) {\n       <mat-option [value]=\"o\">\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\n      </mat-option>\n      }\n    </mat-autocomplete>\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\n    <!--tool-->\n    <button mat-icon-button (click)=\"notifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\n            [attr.aria-label]=\"'Notifications'| translate\"\n            data-help=\"notifications\">\n      <mat-icon matListItemIcon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\"\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\n                [class.filled]=\"profile.notificationsCount\">\n        {{profile.options.notifications.active ? 'notifications':'notifications_off'}}\n      </mat-icon>\n    </button>\n  </div>\n\n  <bizdoc-panes-outlet (dialogChange)=\"dialog = $event\" #main></bizdoc-panes-outlet>\n</div>\n", styles: [":host{display:flex;position:absolute;height:100%;width:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{height:100%;z-index:1}.nav-menu .sub-menu{min-width:200px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-basis:100%}.main .header{align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"] }]
+            args: [{ selector: 'bizdoc-home', host: { class: 'mat-app-background' }, animations: [submenuAnimation, panesTitleAnimation, searchAnimation], template: "<!-- menu -->\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"submenu\"\n     [class.dialog]=\"dialog\"\n     class=\"nav-menu row\">\n  <div class=\"column\">\n    <div>\n      @if (forms.length) {\n      <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\n        <button mat-raised-button\n                [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                (click)=\"opennew()\" [disabled]=\"creating\"\n                [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\n          <mat-icon>add</mat-icon>\n          <span class=\"nav-label\">{{'Compose'| translate}}</span>\n        </button>\n      </div>\n      }\n      <mat-nav-list>\n        <mat-list-item [attr.aria-label]=\"'Dashboard' | translate\"\n                       (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\n                       data-help=\"dashboard\"\n                       [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\n        </mat-list-item>\n        <mat-list-item (click)=\"mails()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       [class.active]=\"activeMenu === 'mailbox'\"\n                       [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"profile.inboxCount < 1\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\n        </mat-list-item>\n        @if (schedulerEnabled) {\n        <mat-list-item [attr.aria-label]=\"'Scheduler' | translate\"\n                       (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\n                       [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (chatEnabled) {\n        <mat-list-item data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\n                       (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\n                       [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\n          <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\n        </mat-list-item>\n        }\n        <mat-divider></mat-divider>\n        @if (enableAnalysis && profile.cubes.length) {\n        <mat-list-item (click)=\"opensubmenu('cube')\"\n                       [class.active]=\"activeMenu === 'cube'\"\n                       [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\n                       data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\n          <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (profile.reports.length) {\n        <mat-list-item (click)=\"opensubmenu('reports')\"\n                       [class.active]=\"activeMenu === 'reports'\"\n                       [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\n          <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\n        </mat-list-item>\n        }\n        @if (sysAdmin) {\n        <mat-divider></mat-divider>\n        <mat-list-item (click)=\"opensubmenu('admin')\"\n                       [class.active]=\"activeMenu === 'admin'\"\n                       [bizdocTooltip]=\"'System'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\n          <mat-icon matListItemIcon>device_hub</mat-icon>\n          <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\n        </mat-list-item>\n        }\n      </mat-nav-list>\n    </div>\n    <span class=\"divider\"></span>\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\n    <div class=\"sign-in\">\n      <button mat-icon-button data-help=\"sign-in\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\n      </button>\n      <span class=\"divider\"></span>\n      <button mat-icon-button [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- -->\n  @if (submenu) {\n  <div class=\"sub-menu\" (mouseleave)=\"collapsesubmenu()\" [@submenu]=\"submenuMode\" (@submenu.done)=\"resize()\">\n    @if (submenu !== 'new') {\n    <div class=\"action\">\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\n    </div>\n    }\n    @switch (submenu) {\n    @case ('new') {\n    <bizdoc-new-menu (change)=\"closesubmenu()\"></bizdoc-new-menu>\n    }\n    @case ('mailbox') {\n    <bizdoc-folders-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-folders-menu>\n    }\n    @case ('admin') {\n    <bizdoc-admin-menu [collapsed]=\"submenuMode === 'shrink'\"></bizdoc-admin-menu>\n    }\n    @case ('reports') {\n    <bizdoc-reports-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-reports-menu>\n    }\n    @case ('cube') {\n    <bizdoc-cube-menu [collapsed]=\"submenuMode === 'shrink'\" (change)=\"collapsesubmenu()\"></bizdoc-cube-menu>\n    }\n    }\n  </div>\n  }\n  @if (dialog) {\n  <div class=\"backdrop\"></div>\n  }\n</div>\n<div class=\"main\">\n  <!-- title -->\n  <div class=\"row header\" [@title]=\"main.titleVariant\">\n    <h1>\n      @if (main.swap) {\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\n      }\n      @for (p of main.panes; track p; let first = $first) {\n      @if (!first) {\n      <span class=\"breadcrumbs\">\\</span>\n      }\n      {{p.title}}\n      }\n      @if (main.panes[0]?.guide) {\n      <button mat-icon-button (click)=\"guide(main.panes[0].guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\n      }\n    </h1>\n    <span class=\"divider\">\n    </span>\n    <!--search-->\n    <input type=\"text\"\n           [@search]=\"searching\"\n           (@search.done)=\"searching && focus()\"\n           #input\n           (keydown.escape)=\"collapse($event)\"\n           [attr.aria-label]=\"'Search'|translate\"\n           [formControl]=\"search\"\n           [matAutocomplete]=\"auto\" class=\"search-box\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\n      @for (o of results | async; track o) {\n      <mat-option [value]=\"o\">\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\n      </mat-option>\n      }\n    </mat-autocomplete>\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\n    <!--notifications-->\n    <button mat-icon-button (click)=\"notifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\n            [attr.aria-label]=\"'Notifications'| translate\"\n            data-help=\"notifications\">\n      <mat-icon matListItemIcon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\"\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\n                [class.filled]=\"profile.notificationsCount\">\n        {{profile.options.notifications.active ? 'notifications':'notifications_off'}}\n      </mat-icon>\n    </button>\n  </div>\n  <!--panes & tabs-->\n  <bizdoc-panes-outlet (dialogChange)=\"dialog = $event\" #main></bizdoc-panes-outlet>\n</div>\n", styles: [":host{display:flex;height:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{z-index:1}.nav-menu .sub-menu{min-width:200px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex:1;overflow-x:hidden;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.main .header{align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"] }]
         }], ctorParameters: () => [{ type: PanesRouter }, { type: SearchService }, { type: MailboxService }, { type: Popup }, { type: PromptService }, { type: GuideService }, { type: i0.Injector }, { type: SessionService }, { type: HubService }, { type: TranslateService }, { type: i3.MatSnackBar }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -21176,13 +21150,11 @@ class ActionPaneComponent extends ActionBase {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ActionPaneComponent, deps: [{ token: PaneRef }, { token: MailboxService }, { token: BizDocComponentFactoryResolver }, { token: AccountService }, { token: PromptService }, { token: TranslateService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ActionPaneComponent, selector: "bizdoc-action-dialog.pane", host: { classAttribute: "pane" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<h2 mat-dialog-title>{{action.title}}</h2>\n<mat-dialog-content>\n  @if (!action.arguments.length) {\n    <p>\n      {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}\n    </p>\n  }\n  <ng-container #container>\n  </ng-container>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button type=\"submit\" [disabled]=\"!valid\" (click)=\"ok()\" color=\"primary\">{{'Yes'|translate}}</button>\n  <button mat-button (click)='close()'>{{'No' | translate}}</button>\n</mat-dialog-actions>\n", styles: [":host ::ng-deep form{display:flex}\n"], dependencies: [{ kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ActionPaneComponent, selector: "bizdoc-action-dialog.pane", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<h2 mat-dialog-title>{{action.title}}</h2>\n<mat-dialog-content>\n  @if (!action.arguments.length) {\n    <p>\n      {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}\n    </p>\n  }\n  <ng-container #container>\n  </ng-container>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button type=\"submit\" [disabled]=\"!valid\" (click)=\"ok()\" color=\"primary\">{{'Yes'|translate}}</button>\n  <button mat-button (click)='close()'>{{'No' | translate}}</button>\n</mat-dialog-actions>\n", styles: [":host ::ng-deep form{display:flex}\n"], dependencies: [{ kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ActionPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-action-dialog.pane', host: {
-                        class: 'pane'
-                    }, template: "<h2 mat-dialog-title>{{action.title}}</h2>\n<mat-dialog-content>\n  @if (!action.arguments.length) {\n    <p>\n      {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}\n    </p>\n  }\n  <ng-container #container>\n  </ng-container>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button type=\"submit\" [disabled]=\"!valid\" (click)=\"ok()\" color=\"primary\">{{'Yes'|translate}}</button>\n  <button mat-button (click)='close()'>{{'No' | translate}}</button>\n</mat-dialog-actions>\n", styles: [":host ::ng-deep form{display:flex}\n"] }]
+            args: [{ selector: 'bizdoc-action-dialog.pane', template: "<h2 mat-dialog-title>{{action.title}}</h2>\n<mat-dialog-content>\n  @if (!action.arguments.length) {\n    <p>\n      {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}\n    </p>\n  }\n  <ng-container #container>\n  </ng-container>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button type=\"submit\" [disabled]=\"!valid\" (click)=\"ok()\" color=\"primary\">{{'Yes'|translate}}</button>\n  <button mat-button (click)='close()'>{{'No' | translate}}</button>\n</mat-dialog-actions>\n", styles: [":host ::ng-deep form{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: MailboxService }, { type: BizDocComponentFactoryResolver }, { type: AccountService }, { type: PromptService }, { type: TranslateService }, { type: SessionService }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -21341,7 +21313,7 @@ const PANES_CONFIG = [{
             }
         ]
     }, {
-        path: 'chatroom/:id',
+        path: 'chat/:id',
         icon: 'person',
         component: ConversationPaneComponent,
         policy: OpenPolicy.Tab | OpenPolicy.Expandable
@@ -27059,14 +27031,14 @@ class CombinationPicker {
         this.stateChanges.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CombinationPicker, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i3$1.MatFormField, optional: true }, { token: i1$1.Overlay }, { token: i2$2.MatDialog }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i2$8.FocusMonitor }, { token: i0.ElementRef }, { token: i1$3.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: CombinationPicker, selector: "bizdoc-combination-picker", inputs: { _divider: ["divider", "_divider"], _displayDivider: ["displayDivider", "_displayDivider"], limit: "limit", cube: "cube", exploreSettings: "exploreSettings", description: "description", touchUi: "touchUi", placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, outputs: { optionSelected: "optionSelected", descriptionChange: "descriptionChange" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy", "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CombinationPicker }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<textarea matInput [disabled]=\"disabled\" (keydown)=\"_keyDown($event)\" [value]=\"description\"></textarea>\r\n<mat-icon matSuffix tabindex=\"-1\" [ngClass]=\"{'mat-warn-text':errorState, 'disabled': disabled}\">arrow_drop_down</mat-icon>\r\n", styles: [":host{display:flex;flex-direction:row}:host textarea{resize:none;cursor:pointer;flex:1}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: CombinationPicker, selector: "bizdoc-combination-picker", inputs: { _divider: ["divider", "_divider"], _displayDivider: ["displayDivider", "_displayDivider"], limit: "limit", cube: "cube", exploreSettings: "exploreSettings", description: "description", touchUi: "touchUi", placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, outputs: { optionSelected: "optionSelected", descriptionChange: "descriptionChange" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy", "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CombinationPicker }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<textarea matInput [disabled]=\"disabled\" (keydown)=\"_keyDown($event)\" [value]=\"description\" [placeholder]=\"placeholder\"></textarea>\r\n<mat-icon matSuffix tabindex=\"-1\" [ngClass]=\"{'mat-warn-text':errorState, 'disabled': disabled}\">arrow_drop_down</mat-icon>\r\n", styles: [":host{display:flex;flex-direction:row}:host textarea{resize:none;cursor:pointer;flex:1}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CombinationPicker, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-combination-picker', providers: [{ provide: MatFormFieldControl, useExisting: CombinationPicker }], host: {
                         '[class.floating]': 'shouldLabelFloat',
                         '[attr.aria-describedby]': 'describedBy'
-                    }, template: "<textarea matInput [disabled]=\"disabled\" (keydown)=\"_keyDown($event)\" [value]=\"description\"></textarea>\r\n<mat-icon matSuffix tabindex=\"-1\" [ngClass]=\"{'mat-warn-text':errorState, 'disabled': disabled}\">arrow_drop_down</mat-icon>\r\n", styles: [":host{display:flex;flex-direction:row}:host textarea{resize:none;cursor:pointer;flex:1}\n"] }]
+                    }, template: "<textarea matInput [disabled]=\"disabled\" (keydown)=\"_keyDown($event)\" [value]=\"description\" [placeholder]=\"placeholder\"></textarea>\r\n<mat-icon matSuffix tabindex=\"-1\" [ngClass]=\"{'mat-warn-text':errorState, 'disabled': disabled}\">arrow_drop_down</mat-icon>\r\n", styles: [":host{display:flex;flex-direction:row}:host textarea{resize:none;cursor:pointer;flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -31198,7 +31170,7 @@ let SystemDiffComponent = class SystemDiffComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SystemDiffComponent, deps: [{ token: PromptService }, { token: UtilityRef }, { token: TranslateService }, { token: DatasourceService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SystemDiffComponent, selector: "ng-component", host: { classAttribute: "pane" }, viewQueries: [{ propertyName: "contents", first: true, predicate: ["contents"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SystemDiffComponent, selector: "ng-component", viewQueries: [{ propertyName: "contents", first: true, predicate: ["contents"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SystemDiffComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-diff' })
@@ -31206,9 +31178,7 @@ SystemDiffComponent = __decorate([
 ], SystemDiffComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SystemDiffComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"] }]
+            args: [{ template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
@@ -31685,7 +31655,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: SystemService }, { token: SessionService }, { token: PaneRef }, { token: PanesRouter }, { token: PromptService }, { token: TranslateService }, { token: Popup }, { token: GuideService }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i11$2.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i11$2.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
 };
 DocumentTraceComponent = __decorate([
     BizDoc({ selector: 'bizdoc-trace-utility' })
@@ -31693,9 +31663,7 @@ DocumentTraceComponent = __decorate([
 ], DocumentTraceComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DocumentTraceComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, animations: [trigger('element', EnterExitRight)], template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"] }]
+            args: [{ animations: [trigger('element', EnterExitRight)], template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"] }]
         }], ctorParameters: () => [{ type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
@@ -32700,7 +32668,7 @@ let ProfilerComponent = class ProfilerComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ProfilerComponent, deps: [{ token: PromptService }, { token: UtilityRef }, { token: SessionService }, { token: i2$2.MatDialog }, { token: DocumentInfo }, { token: ChatInfo }, { token: GuideService }, { token: PanesRouter }, { token: i0.ChangeDetectorRef }, { token: PaneRef }, { token: TranslateService }, { token: AccountService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <mat-form-field subscriptSizing=\"dynamic\">\n    <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\n      (optionSelected)=\"change($event)\">\n      @for (u of users$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n      }\n    </mat-autocomplete>\n    <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\" matSuffix>search</mat-icon>\n  </mat-form-field>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n</mat-toolbar>\n@if (data) {\n  <div class=\"row wrap\">\n    <!-- info -->\n    <mat-card class=\"flex\">\n      <mat-card-header>\n        <mat-card-title>\n          <span>{{data.info.name}}</span>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <br />\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n    <mat-card class=\"flex\" data-help=\"activity\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Activity' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\n          <e-series-collection>\n          </e-series-collection>\n        </ejs-chart>\n      </mat-card-content>\n    </mat-card>\n    <!-- pending -->\n    <mat-card class=\"flex\" data-help=\"pending\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Pending' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.pending.length) {\n          <table class=\"mat-mdc-table\">\n            <thead>\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-header-cell\"></td>\n                <td class=\"mat-mdc-header-cell\"></td>\n              </tr>\n            </thead>\n            <tbody role=\"rowgroup\">\n              @for (r of data.pending; track r) {\n                <tr class=\"mat-mdc-row\">\n                  <td class=\"mat-mdc-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\n                  <td class=\"mat-mdc-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n    </mat-card>\n    <!-- positions -->\n    <mat-card class=\"flex\" data-help=\"positions\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Positions' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.positions.length) {\n          <table class=\"mat-mdc-table\">\n            @for (p of data.positions; track p) {\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-cell\">{{p.value }}</td>\n                <td class=\"mat-mdc-cell\">{{p.role | role}}</td>\n                <td class=\"mat-mdc-cell\">\n                  <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\n                </td>\n              </tr>\n            }\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n<!-- assign dialog -->\n<ng-template #assignTpl>\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\n  <mat-dialog-content>\n    <form autocomplete=\"off\" class=\"column\">\n      <mat-form-field>\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\n          @for (u of assignable$ | async; track u) {\n            <mat-option [value]=\"u.id\">{{u.name}}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </form>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\n  </mat-dialog-actions>\n</ng-template>\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i11$2.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i11$2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "component", type: i11.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i11.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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: "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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DifferencePipe, name: "amDifference" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: RolePipe, name: "role" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <mat-form-field subscriptSizing=\"dynamic\">\n    <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\n      (optionSelected)=\"change($event)\">\n      @for (u of users$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n      }\n    </mat-autocomplete>\n    <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\" matSuffix>search</mat-icon>\n  </mat-form-field>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n</mat-toolbar>\n@if (data) {\n  <div class=\"row wrap\">\n    <!-- info -->\n    <mat-card class=\"flex\">\n      <mat-card-header>\n        <mat-card-title>\n          <span>{{data.info.name}}</span>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <br />\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n    <mat-card class=\"flex\" data-help=\"activity\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Activity' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\n          <e-series-collection>\n          </e-series-collection>\n        </ejs-chart>\n      </mat-card-content>\n    </mat-card>\n    <!-- pending -->\n    <mat-card class=\"flex\" data-help=\"pending\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Pending' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.pending.length) {\n          <table class=\"mat-mdc-table\">\n            <thead>\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-header-cell\"></td>\n                <td class=\"mat-mdc-header-cell\"></td>\n              </tr>\n            </thead>\n            <tbody role=\"rowgroup\">\n              @for (r of data.pending; track r) {\n                <tr class=\"mat-mdc-row\">\n                  <td class=\"mat-mdc-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\n                  <td class=\"mat-mdc-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n    </mat-card>\n    <!-- positions -->\n    <mat-card class=\"flex\" data-help=\"positions\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Positions' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.positions.length) {\n          <table class=\"mat-mdc-table\">\n            @for (p of data.positions; track p) {\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-cell\">{{p.value }}</td>\n                <td class=\"mat-mdc-cell\">{{p.role | role}}</td>\n                <td class=\"mat-mdc-cell\">\n                  <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\n                </td>\n              </tr>\n            }\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n<!-- assign dialog -->\n<ng-template #assignTpl>\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\n  <mat-dialog-content>\n    <form autocomplete=\"off\" class=\"column\">\n      <mat-form-field>\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\n          @for (u of assignable$ | async; track u) {\n            <mat-option [value]=\"u.id\">{{u.name}}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </form>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\n  </mat-dialog-actions>\n</ng-template>\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i11$2.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i11$2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "component", type: i11.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i11.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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: "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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DifferencePipe, name: "amDifference" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: RolePipe, name: "role" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ProfilerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-user-profiler' })
@@ -32708,9 +32676,7 @@ ProfilerComponent = __decorate([
 ], ProfilerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ProfilerComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        class: 'pane'
-                    }, template: "<mat-toolbar>\n  <mat-form-field subscriptSizing=\"dynamic\">\n    <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\n      (optionSelected)=\"change($event)\">\n      @for (u of users$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n      }\n    </mat-autocomplete>\n    <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\" matSuffix>search</mat-icon>\n  </mat-form-field>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n</mat-toolbar>\n@if (data) {\n  <div class=\"row wrap\">\n    <!-- info -->\n    <mat-card class=\"flex\">\n      <mat-card-header>\n        <mat-card-title>\n          <span>{{data.info.name}}</span>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <br />\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n    <mat-card class=\"flex\" data-help=\"activity\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Activity' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\n          <e-series-collection>\n          </e-series-collection>\n        </ejs-chart>\n      </mat-card-content>\n    </mat-card>\n    <!-- pending -->\n    <mat-card class=\"flex\" data-help=\"pending\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Pending' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.pending.length) {\n          <table class=\"mat-mdc-table\">\n            <thead>\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-header-cell\"></td>\n                <td class=\"mat-mdc-header-cell\"></td>\n              </tr>\n            </thead>\n            <tbody role=\"rowgroup\">\n              @for (r of data.pending; track r) {\n                <tr class=\"mat-mdc-row\">\n                  <td class=\"mat-mdc-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\n                  <td class=\"mat-mdc-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n    </mat-card>\n    <!-- positions -->\n    <mat-card class=\"flex\" data-help=\"positions\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Positions' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.positions.length) {\n          <table class=\"mat-mdc-table\">\n            @for (p of data.positions; track p) {\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-cell\">{{p.value }}</td>\n                <td class=\"mat-mdc-cell\">{{p.role | role}}</td>\n                <td class=\"mat-mdc-cell\">\n                  <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\n                </td>\n              </tr>\n            }\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n<!-- assign dialog -->\n<ng-template #assignTpl>\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\n  <mat-dialog-content>\n    <form autocomplete=\"off\" class=\"column\">\n      <mat-form-field>\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\n          @for (u of assignable$ | async; track u) {\n            <mat-option [value]=\"u.id\">{{u.name}}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </form>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\n  </mat-dialog-actions>\n</ng-template>\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"] }]
+            args: [{ template: "<mat-toolbar>\n  <mat-form-field subscriptSizing=\"dynamic\">\n    <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\n      (optionSelected)=\"change($event)\">\n      @for (u of users$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n      }\n    </mat-autocomplete>\n    <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\" matSuffix>search</mat-icon>\n  </mat-form-field>\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n</mat-toolbar>\n@if (data) {\n  <div class=\"row wrap\">\n    <!-- info -->\n    <mat-card class=\"flex\">\n      <mat-card-header>\n        <mat-card-title>\n          <span>{{data.info.name}}</span>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <br />\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n    <mat-card class=\"flex\" data-help=\"activity\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Activity' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\n          <e-series-collection>\n          </e-series-collection>\n        </ejs-chart>\n      </mat-card-content>\n    </mat-card>\n    <!-- pending -->\n    <mat-card class=\"flex\" data-help=\"pending\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Pending' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.pending.length) {\n          <table class=\"mat-mdc-table\">\n            <thead>\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-header-cell\"></td>\n                <td class=\"mat-mdc-header-cell\"></td>\n              </tr>\n            </thead>\n            <tbody role=\"rowgroup\">\n              @for (r of data.pending; track r) {\n                <tr class=\"mat-mdc-row\">\n                  <td class=\"mat-mdc-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\n                  <td class=\"mat-mdc-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n    </mat-card>\n    <!-- positions -->\n    <mat-card class=\"flex\" data-help=\"positions\">\n      <mat-card-header>\n        <mat-card-title>\n          {{'Positions' | translate}}\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content>\n        @if (data.positions.length) {\n          <table class=\"mat-mdc-table\">\n            @for (p of data.positions; track p) {\n              <tr class=\"mat-mdc-row\">\n                <td class=\"mat-mdc-cell\">{{p.value }}</td>\n                <td class=\"mat-mdc-cell\">{{p.role | role}}</td>\n                <td class=\"mat-mdc-cell\">\n                  <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\n                </td>\n              </tr>\n            }\n          </table>\n        } @else {\n          <span class=\"mat-body-2\">{{'None' | translate }}</span>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <span class=\"divider\"></span>\n        <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n<!-- assign dialog -->\n<ng-template #assignTpl>\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\n  <mat-dialog-content>\n    <form autocomplete=\"off\" class=\"column\">\n      <mat-form-field>\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\n          @for (u of assignable$ | async; track u) {\n            <mat-option [value]=\"u.id\">{{u.name}}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </form>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\n  </mat-dialog-actions>\n</ng-template>\n", styles: [":host{min-width:560px;display:block}.mat-mdc-card{margin:5px}.mat-mdc-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-mdc-table{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: UtilityRef }, { type: SessionService }, { type: i2$2.MatDialog }, { type: DocumentInfo }, { type: ChatInfo }, { type: GuideService }, { type: PanesRouter }, { type: i0.ChangeDetectorRef }, { type: PaneRef }, { type: TranslateService }, { type: AccountService }, { type: i1$2.FormBuilder }], propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['activity']
@@ -35045,14 +35011,14 @@ let MatrixViewDesignComponent = class MatrixViewDesignComponent extends Designer
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MatrixViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: MatrixViewDesignComponent, selector: "ng-component", host: { classAttribute: "column" }, usesInheritance: true, ngImport: i0, template: "@if (mode !== 'widget') {\n  @if (view) {\n<h2 class=\"mat-h2\">{{context.title|translate}}</h2>\n<div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\n  <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\n</div>\n<div class=\"row actions\">\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\n</div>\n  } @else {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length>1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'XAxis'|translate}}</mat-label>\n      <mat-select formControlName=\"xAxis\" required>\n        @for (a of cube?.axes; track a) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n      </mat-select>\n      @if (form.controls.xAxis.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Series'|translate}}</mat-label>\n      <mat-select formControlName=\"series\" required>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value!==a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      @if (form.controls.series.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n  </div>\n  @if (cube?.indices?.length) {\n  <mat-form-field class=\"flex\">\n    <mat-label>{{'Indices'|translate}}</mat-label>\n    <mat-select formControlName=\"indices\" multiple>\n      @for (i of cube.indices; track i) {\n      <mat-option [value]=\"i.name\">{{i.title}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Filters'|translate}}</mat-label>\n      <mat-select formControlName=\"filters\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\n      <mat-select formControlName=\"aggregate\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name && (!form.controls.filters.value || form.controls.filters.value.indexOf(a.name) < 0)) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      <mat-hint></mat-hint>\n    </mat-form-field>\n  </div>\n  <h2 class=\"mat-h2 row\">\n    {{'Summary'|translate}}\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"add(form.controls.sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\n  </h2>\n  <table class=\"mat-mdc-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, form.controls.sum)\">\n    @for (s of form.controls.sum.controls; track s; let index = $index) {\n    <tr class=\"mat-mdc-row\" [formGroup]=\"s\" cdkDrag>\n      <td class=\"mat-mdc-cell\">\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td class=\"mat-mdc-cell\" style=\"width: 100%\">{{s.controls.title.value}}</td>\n      <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\n        <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\n        <button mat-icon-button (click)=\"form.controls.sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\n      </td>\n    </tr>\n    }\n  </table>\n</ng-container>\n  }\n}\n<ng-template #sumform let-form=\"form\">\n  <ng-container [formGroup]=\"form\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Title'|translate}}</mat-label>\n      <input matInput formControlName=\"title\" required />\n    </mat-form-field>\n    <mat-radio-group formControlName=\"axis\">\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\n    </mat-radio-group>\n    <mat-form-field>\n      <mat-label>{{'Calculate'|translate}}</mat-label>\n      <mat-select formControlName=\"calculate\">\n        <mat-option>{{'None'|translate}}</mat-option>\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div class=\"row\"></div>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$b.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$b.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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"], 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: MatrixViewDesignComponent, selector: "ng-component", host: { classAttribute: "column" }, usesInheritance: true, ngImport: i0, template: "@if (mode !== 'widget') {\n  @if (view) {\n<h2 class=\"mat-h2\">{{context.title|translate}}</h2>\n<div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\n  <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\n</div>\n<div class=\"row actions\">\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\n</div>\n  } @else {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length>1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'XAxis'|translate}}</mat-label>\n      <mat-select formControlName=\"xAxis\" required>\n        @for (a of cube?.axes; track a) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n      </mat-select>\n      @if (form.controls.xAxis.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Series'|translate}}</mat-label>\n      <mat-select formControlName=\"series\" required>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value!==a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      @if (form.controls.series.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n  </div>\n  @if (cube?.indices?.length) {\n  <mat-form-field class=\"flex\">\n    <mat-label>{{'Indices'|translate}}</mat-label>\n    <mat-select formControlName=\"indices\" multiple>\n      @for (i of cube.indices; track i) {\n      <mat-option [value]=\"i.name\">{{i.title}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Filters'|translate}}</mat-label>\n      <mat-select formControlName=\"filters\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\n      <mat-select formControlName=\"aggregate\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name && (!form.controls.filters.value || form.controls.filters.value.indexOf(a.name) < 0)) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      <mat-hint></mat-hint>\n    </mat-form-field>\n  </div>\n  <h2 class=\"mat-h2 row\">\n    {{'Summary'|translate}}\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"add(form.controls.sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\n  </h2>\n  <table class=\"mat-mdc-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, form.controls.sum)\">\n    @for (s of form.controls.sum.controls; track s; let index = $index) {\n    <tr class=\"mat-mdc-row\" [formGroup]=\"s\" cdkDrag>\n      <td class=\"mat-mdc-cell\">\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td class=\"mat-mdc-cell\" style=\"width: 100%\">{{s.controls.title.value}}</td>\n      <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\n        <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\n        <button mat-icon-button (click)=\"form.controls.sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\n      </td>\n    </tr>\n    }\n  </table>\n</ng-container>\n  }\n}\n<ng-template #sumform let-form=\"form\">\n  <ng-container [formGroup]=\"form\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Title'|translate}}</mat-label>\n      <input matInput formControlName=\"title\" required />\n    </mat-form-field>\n    <mat-radio-group formControlName=\"axis\">\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\n    </mat-radio-group>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Calculate'|translate}}</mat-label>\n      <mat-select formControlName=\"calculate\">\n        <mat-option>{{'None'|translate}}</mat-option>\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div class=\"row\">\n      <mat-form-field class=\"flex\">\n        <mat-label>{{'Value'|translate}}</mat-label>\n        <input matInput formControlName=\"value\" />\n      </mat-form-field>\n      <mat-form-field class=\"flex\">\n        <mat-label>{{'Format'|translate}}</mat-label>\n        <mat-select formControlName=\"format\">\n          <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\n          <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\n          <mat-option value=\"Percent\">{{'Percent'|translate}}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$b.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$b.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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"], 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"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 MatrixViewDesignComponent = __decorate([
     BizDoc({ selector: 'matrix-view-designer' })
 ], MatrixViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MatrixViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ host: { class: 'column' }, template: "@if (mode !== 'widget') {\n  @if (view) {\n<h2 class=\"mat-h2\">{{context.title|translate}}</h2>\n<div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\n  <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\n</div>\n<div class=\"row actions\">\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\n</div>\n  } @else {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length>1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'XAxis'|translate}}</mat-label>\n      <mat-select formControlName=\"xAxis\" required>\n        @for (a of cube?.axes; track a) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n      </mat-select>\n      @if (form.controls.xAxis.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Series'|translate}}</mat-label>\n      <mat-select formControlName=\"series\" required>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value!==a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      @if (form.controls.series.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n  </div>\n  @if (cube?.indices?.length) {\n  <mat-form-field class=\"flex\">\n    <mat-label>{{'Indices'|translate}}</mat-label>\n    <mat-select formControlName=\"indices\" multiple>\n      @for (i of cube.indices; track i) {\n      <mat-option [value]=\"i.name\">{{i.title}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Filters'|translate}}</mat-label>\n      <mat-select formControlName=\"filters\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\n      <mat-select formControlName=\"aggregate\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name && (!form.controls.filters.value || form.controls.filters.value.indexOf(a.name) < 0)) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      <mat-hint></mat-hint>\n    </mat-form-field>\n  </div>\n  <h2 class=\"mat-h2 row\">\n    {{'Summary'|translate}}\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"add(form.controls.sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\n  </h2>\n  <table class=\"mat-mdc-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, form.controls.sum)\">\n    @for (s of form.controls.sum.controls; track s; let index = $index) {\n    <tr class=\"mat-mdc-row\" [formGroup]=\"s\" cdkDrag>\n      <td class=\"mat-mdc-cell\">\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td class=\"mat-mdc-cell\" style=\"width: 100%\">{{s.controls.title.value}}</td>\n      <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\n        <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\n        <button mat-icon-button (click)=\"form.controls.sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\n      </td>\n    </tr>\n    }\n  </table>\n</ng-container>\n  }\n}\n<ng-template #sumform let-form=\"form\">\n  <ng-container [formGroup]=\"form\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Title'|translate}}</mat-label>\n      <input matInput formControlName=\"title\" required />\n    </mat-form-field>\n    <mat-radio-group formControlName=\"axis\">\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\n    </mat-radio-group>\n    <mat-form-field>\n      <mat-label>{{'Calculate'|translate}}</mat-label>\n      <mat-select formControlName=\"calculate\">\n        <mat-option>{{'None'|translate}}</mat-option>\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div class=\"row\"></div>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ host: { class: 'column' }, template: "@if (mode !== 'widget') {\n  @if (view) {\n<h2 class=\"mat-h2\">{{context.title|translate}}</h2>\n<div (document:keydown.escape)=\"closeView($event)\" #element class=\"column\">\n  <ng-container *ngTemplateOutlet=\"view; context: context\"></ng-container>\n</div>\n<div class=\"row actions\">\n  <span class=\"divider\"></span>\n  <button mat-icon-button (click)=\"closeView()\" type=\"button\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_return</mat-icon></button>\n</div>\n  } @else {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length>1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'XAxis'|translate}}</mat-label>\n      <mat-select formControlName=\"xAxis\" required>\n        @for (a of cube?.axes; track a) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n      </mat-select>\n      @if (form.controls.xAxis.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('XAxis'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Series'|translate}}</mat-label>\n      <mat-select formControlName=\"series\" required>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value!==a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      @if (form.controls.series.hasError('required')) {\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\n      }\n    </mat-form-field>\n  </div>\n  @if (cube?.indices?.length) {\n  <mat-form-field class=\"flex\">\n    <mat-label>{{'Indices'|translate}}</mat-label>\n    <mat-select formControlName=\"indices\" multiple>\n      @for (i of cube.indices; track i) {\n      <mat-option [value]=\"i.name\">{{i.title}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <div class=\"row gap\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Filters'|translate}}</mat-label>\n      <mat-select formControlName=\"filters\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\n      <mat-select formControlName=\"aggregate\" multiple>\n        @for (a of cube?.axes; track a) {\n        @if (form.controls.xAxis.value !== a.name && form.controls.series.value !== a.name && (!form.controls.filters.value || form.controls.filters.value.indexOf(a.name) < 0)) {\n        <mat-option [value]=\"a.name\">{{a.title }}</mat-option>\n        }\n        }\n      </mat-select>\n      <mat-hint></mat-hint>\n    </mat-form-field>\n  </div>\n  <h2 class=\"mat-h2 row\">\n    {{'Summary'|translate}}\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"add(form.controls.sum, newSum(), 'Summary', sumform)\" [bizdocTooltip]=\"'Add'|translate\" type=\"button\"><mat-icon>add_circle_outline</mat-icon></button>\n  </h2>\n  <table class=\"mat-mdc-table\" formArrayName=\"sum\" cdkDropList (cdkDropListDropped)=\"drop($event, form.controls.sum)\">\n    @for (s of form.controls.sum.controls; track s; let index = $index) {\n    <tr class=\"mat-mdc-row\" [formGroup]=\"s\" cdkDrag>\n      <td class=\"mat-mdc-cell\">\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td class=\"mat-mdc-cell\" style=\"width: 100%\">{{s.controls.title.value}}</td>\n      <td class=\"mat-mdc-cell\" style=\"white-space: pre;\">\n        <button mat-icon-button (click)=\"edit(s, 'Summary', sumform)\" [bizdocTooltip]=\"'Edit'|translate\" type=\"button\"><mat-icon>edit</mat-icon></button>\n        <button mat-icon-button (click)=\"form.controls.sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\" type=\"button\"><mat-icon>delete</mat-icon></button>\n      </td>\n    </tr>\n    }\n  </table>\n</ng-container>\n  }\n}\n<ng-template #sumform let-form=\"form\">\n  <ng-container [formGroup]=\"form\">\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Title'|translate}}</mat-label>\n      <input matInput formControlName=\"title\" required />\n    </mat-form-field>\n    <mat-radio-group formControlName=\"axis\">\n      <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\n      <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\n    </mat-radio-group>\n    <mat-form-field class=\"flex\">\n      <mat-label>{{'Calculate'|translate}}</mat-label>\n      <mat-select formControlName=\"calculate\">\n        <mat-option>{{'None'|translate}}</mat-option>\n        <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\n        <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\n        <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\n        <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div class=\"row\">\n      <mat-form-field class=\"flex\">\n        <mat-label>{{'Value'|translate}}</mat-label>\n        <input matInput formControlName=\"value\" />\n      </mat-form-field>\n      <mat-form-field class=\"flex\">\n        <mat-label>{{'Format'|translate}}</mat-label>\n        <mat-select formControlName=\"format\">\n          <mat-option value=\"Currency\">{{'Currency'|translate}}</mat-option>\n          <mat-option value=\"Number\">{{'Numeric'|translate}}</mat-option>\n          <mat-option value=\"Percent\">{{'Percent'|translate}}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </ng-container>\n</ng-template>\n" }]
         }] });
 
 let ChartViewDesignComponent = class ChartViewDesignComponent extends DesignerCubeElementComponent {