@bizdoc/core 3.6.3 → 3.6.5

package/fesm2022/bizdoc-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Inject, Injectable, Pipe, Directive, Component, Injector, ElementRef, HostListener, TemplateRef, ViewContainerRef, ViewChild, Input, HostBinding, Output, Optional, Self, EventEmitter, NgModule, ViewChildren, inject, Host, SkipSelf, ContentChild, ContentChildren, provideAppInitializer } from '@angular/core';
-import { Subject, Observable, firstValueFrom, forkJoin, BehaviorSubject, merge, takeUntil as takeUntil$1, shareReplay as shareReplay$1, map as map$1, of, filter as filter$1, from, interval, switchMap as switchMap$1, isObservable, catchError as catchError$1, startWith as startWith$1, EMPTY, debounceTime as debounceTime$1 } from 'rxjs';
-import { map, tap, shareReplay, filter, startWith, takeUntil, debounceTime, switchMap, catchError, first, take, finalize } from 'rxjs/operators';
+import { Subject, from, of, firstValueFrom, forkJoin, BehaviorSubject, merge, takeUntil as takeUntil$1, shareReplay as shareReplay$1, map as map$1, Observable, filter as filter$1, interval, switchMap as switchMap$1, isObservable, catchError as catchError$1, startWith as startWith$1, EMPTY, debounceTime as debounceTime$1 } from 'rxjs';
+import { map, tap, switchMap, shareReplay, filter, startWith, takeUntil, debounceTime, catchError, first, take, finalize, delay } from 'rxjs/operators';
 import * as i4 from '@angular/material/chips';
 import { MatChipInput, MatChipsModule, MatChipListbox } from '@angular/material/chips';
 import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';
@@ -1146,12 +1146,6 @@ class SessionService {
             this.profile.options.notificationsView !== undefined &&
             this.profile.options.notificationsView < date;
     }
-    _constructpalette(color) {
-        const palette = MATERIAL_PALETTES[color];
-        return [palette['100'], palette['300'], palette['500'], palette['700'], palette['900'],
-            palette['200'], palette['400'], palette['600'], palette['800'], palette['hex'],
-            palette['a100'], palette['a400'], palette['a200'], palette['a700']];
-    }
     get primeryPalette() {
         return this._primarypalette;
     }
@@ -1205,10 +1199,10 @@ class SessionService {
         return this.profile.system;
     }
     /** online or set in profile */
-    get state() {
+    get availabilityState() {
         return this.profile.available || 'Online';
     }
-    set state(value) {
+    set availabilityState(value) {
         this.profile.available = value === 'Online' ? null : value;
         this._http.put(`/api/account/available?mode=${this.profile.available || ''}`, {}).subscribe();
     }
@@ -1224,17 +1218,17 @@ class SessionService {
         if (options && options.active) {
             const today = dayjs().startOf('day');
             return (!options.from || dayjs(options.from).startOf('day') <= today)
-                && (!options.to || dayjs(options.to).startOf('day') >= today);
+                && (!options.to || dayjs(options.to).startOf('day') > today);
         }
         else
             return false;
     }
     /** update profile  */
-    update(profile) {
+    updateProfile(profile) {
         return this._http.put('/api/account/update', profile).pipe(tap(() => Object.assign(this._profile.options, profile)));
     }
     /** mark guide as visited in profile */
-    guide(name) {
+    markGuideAsRead(name) {
         return this._http.put(`/api/account/guide/${encodeURIComponent(name)}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap(() => {
             const guide = this._profile.guides.find(g => g.name === name);
             if (guide)
@@ -1244,25 +1238,14 @@ class SessionService {
     }
     /** get profile */
     refresh() {
-        return new Observable(observe => {
-            const complete = (profile) => {
-                this._profile = profile;
-                observe.next();
-                this._loaded.next();
-            };
-            this._http.get('/api/account/refresh').subscribe({
-                next: r => {
-                    if (!this._profile) // 1st time
-                        this._changeTheme(this.theme).
-                            then(() => complete(r));
-                    else
-                        complete(r);
-                    this._hub.state !== HubConnectionState.Connected && this._hub.start();
-                    this._firebase.state !== FirebaseState.Activated &&
-                        this._firebase.activate();
-                }, error: observe.error.bind(this)
-            });
-        });
+        const ok = this.ok;
+        return this._http.get('/api/account/refresh').pipe(tap(profile => {
+            this._profile = profile;
+            this._hub.state !== HubConnectionState.Connected && this._hub.start();
+            this._firebase.state !== FirebaseState.Activated &&
+                this._firebase.activate();
+        }), switchMap(() => !ok ? // 1st time
+            from(this._changeTheme(this.theme)) : of(undefined)), tap(this._loaded.next.bind(this)));
     }
     getProfileExtra(name) {
         return this._http.get(`/api/account/extra/${name}`);
@@ -1294,18 +1277,24 @@ class SessionService {
             userId
         });
     }
-    inboxTouch() {
+    markInboxAsTouched() {
         return firstValueFrom(this._http.put('/api/account/inboxview', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
             this.profile.inboxCount = 0;
             this.profile.options.inboxView = e.time;
         })));
     }
-    notificationsTouch() {
+    markNotificationsAsTouched() {
         return firstValueFrom(this._http.put('/api/account/notificationsView', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
             this.profile.messagesCount = 0;
             this.profile.options.notificationsView = e.time;
         })));
     }
+    _constructPalette(color) {
+        const palette = MATERIAL_PALETTES[color];
+        return [palette['100'], palette['300'], palette['500'], palette['700'], palette['900'],
+            palette['200'], palette['400'], palette['600'], palette['800'], palette['hex'],
+            palette['a100'], palette['a400'], palette['a200'], palette['a700']];
+    }
     _getBrowserLang() {
         let lang = navigator.language;
         if (this.languages.indexOf(lang) > -1)
@@ -1331,8 +1320,8 @@ class SessionService {
      */
     _changeTheme(theme) {
         return new Promise((resolve) => {
-            this._accentpalette = this._constructpalette(this.theme.accent);
-            this._primarypalette = this._constructpalette(this.theme.primary);
+            this._accentpalette = this._constructPalette(this.theme.accent);
+            this._primarypalette = this._constructPalette(this.theme.primary);
             let style = document.getElementById('bizdoc-theme');
             // remove
             if (style)
@@ -1833,10 +1822,10 @@ const STRINGS = {
         Commented: '{0} commented',
         DeleteFile: 'Delete Attachment',
         DeleteFileAsk: 'Are you sure you want to delete this attachment?',
-        DeleteCommentAsk: 'Are you sure you want to delete this comment?',
+        //DeleteCommentAsk: 'Are you sure you want to delete this comment?',
         GrantAccess: 'Grant Access',
-        GrantTip: 'May view and take actions on your behalf.',
-        OutOfOfficeTip: 'Redirect mail to another user on your absence.',
+        GrantTip: 'View and take actions on your behalf.',
+        OutOfOfficeTip: 'Redirect mail on your absence.',
         Timeline: 'Timeline',
         Theme: 'Theme',
         Back: 'Back',
@@ -1997,7 +1986,7 @@ const STRINGS = {
         To: 'To',
         Duration: 'Duration',
         Deviation: 'Deviation',
-        DurationTime: 'within {0} duration',
+        DurationTime: 'In {0}',
         Standard: 'Standard',
         StandardValue: 'Standard: {0}',
         Average: 'Average',
@@ -2382,9 +2371,9 @@ const STRINGS = {
         DeleteFileMale: 'מחק צרופה',
         DeleteFileFemale: 'מחקי צרופה',
         DeleteFileAsk: 'האם את/ה בטוח/ה שברצונך למחוק את הצרופה?',
-        DeleteCommentAsk: 'האם את/ה בטוח/ה שברצונך למחוק את הערה?',
-        DeleteCommentAskMale: 'האם אתה בטוח שברצונך למחוק את הערה?',
-        DeleteCommentAskFemale: 'האם את בטוחה שברצונך למחוק את הערה?',
+        //DeleteCommentAsk: 'האם את/ה בטוח/ה שברצונך למחוק את הערה?',
+        //DeleteCommentAskMale: 'האם אתה בטוח שברצונך למחוק את הערה?',
+        //DeleteCommentAskFemale: 'האם את בטוחה שברצונך למחוק את הערה?',
         DeleteFileAskMale: 'האם אתה בטוח שברצונך למחוק את הצרופה?',
         DeleteFileAskFemale: 'האם את בטוחה שברצונך למחוק את הצרופה?',
         GrantAccess: 'הרשאות',
@@ -3286,7 +3275,7 @@ class GuideService {
         oRef.attach(portal);
         oRef.backdropClick().subscribe(() => oRef.detach());
         const gRef = new GuideRef(guide, oRef);
-        !this.seen(guide.name) && this._session.guide(guide.name).subscribe();
+        !this.seen(guide.name) && this._session.markGuideAsRead(guide.name).subscribe();
         return gRef;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GuideService, deps: [{ token: i2$3.Overlay }, { token: i0.Injector }, { token: SessionService }, { token: TranslateService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3711,7 +3700,7 @@ class OptionsComponent {
         }
         this.languages = this._session.languages;
         this.currentLanguage = this._session.language;
-        this.available = this._session.state;
+        this.available = this._session.availabilityState;
         this.theme = this._session.theme.name;
         this.profile = this._session.profile;
         this.voting = !config.comments || config.comments.voting !== false;
@@ -3735,7 +3724,7 @@ class OptionsComponent {
     }
     setAvailable(val) {
         this.close();
-        this._session.state = val;
+        this._session.availabilityState = val;
     }
     changeTheme(name) {
         this._session.theme = name;
@@ -3819,7 +3808,7 @@ class OptionsComponent {
     }
     save() {
         this.saveing = true;
-        this._session.update(this.form.getRawValue()).subscribe({
+        this._session.updateProfile(this.form.getRawValue()).subscribe({
             next: () => this.form.markAsPristine(),
             error: () => this._sb.error(),
             complete: () => this.saveing = false
@@ -3886,11 +3875,11 @@ class OptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OptionsComponent, deps: [{ token: PromptService }, { token: GuideService }, { token: HubService }, { token: i2$2.MatDialog }, { token: i1$2.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: SessionService }, { token: Popup }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "keyboard", first: true, predicate: ["keyboardTmpl"], descendants: true }, { propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"oooDates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}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: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], 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$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i2$6.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$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "keyboard", first: true, predicate: ["keyboardTmpl"], descendants: true }, { propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"oooDates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}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: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], 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$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i2$6.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$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"oooDates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"oooDates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: GuideService }, { type: HubService }, { type: i2$2.MatDialog }, { type: i1$2.FormBuilder }, { type: AccountService }, { type: PromptService }, { type: SessionService }, { type: Popup }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -6066,8 +6055,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         }], ctorParameters: () => [{ type: TranslateService }, { type: DatasourceService }] });
 
 let AutocompleteField = class AutocompleteField {
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     constructor(_ds) {
         this._ds = _ds;
+        this.subscriptSizing = 'fixed';
         this.control = new FormControl();
         this._destroy = new Subject();
     }
@@ -6080,14 +6074,14 @@ let AutocompleteField = class AutocompleteField {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteField, deps: [{ token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AutocompleteField, isStandalone: false, selector: "ng-component", inputs: { params: "params" }, host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: TypeAutocomplete, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <bizdoc-autocomplete [placeholder]=\"placeholder |localizedString\" [formControl]=control\r\n    [required]=\"required\" [type]=\"dataType\"></bizdoc-autocomplete>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  {{control.value | typeValue: dataType | async}}\r\n}\r\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: 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: TypeAutocomplete, selector: "bizdoc-autocomplete", inputs: ["type", "placeholder", "text", "required", "disabled", "value", "minimumChars", "textFormControlName", "textFormControl"], outputs: ["textChange", "optionSelected"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TypeValuePipe, name: "typeValue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AutocompleteField, isStandalone: false, selector: "ng-component", inputs: { params: "params" }, host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: TypeAutocomplete, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <bizdoc-autocomplete [placeholder]=\"placeholder |localizedString\" [formControl]=control\r\n    [required]=\"required\" [type]=\"dataType\"></bizdoc-autocomplete>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  {{control.value | typeValue: dataType | async}}\r\n}\r\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: 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: TypeAutocomplete, selector: "bizdoc-autocomplete", inputs: ["type", "placeholder", "text", "required", "disabled", "value", "minimumChars", "textFormControlName", "textFormControl"], outputs: ["textChange", "optionSelected"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TypeValuePipe, name: "typeValue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 AutocompleteField = __decorate([
     BizDoc({ selector: 'autocomplete-control' })
 ], AutocompleteField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <bizdoc-autocomplete [placeholder]=\"placeholder |localizedString\" [formControl]=control\r\n    [required]=\"required\" [type]=\"dataType\"></bizdoc-autocomplete>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  {{control.value | typeValue: dataType | async}}\r\n}\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <bizdoc-autocomplete [placeholder]=\"placeholder |localizedString\" [formControl]=control\r\n    [required]=\"required\" [type]=\"dataType\"></bizdoc-autocomplete>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  {{control.value | typeValue: dataType | async}}\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: DatasourceService }], propDecorators: { params: [{
                 type: Input
             }], input: [{
@@ -6257,6 +6251,7 @@ class LayoutComponent {
                 f.label = f.name;
             Object.assign(instance, f);
             instance.mode = 'compose';
+            //instance.dense = true;
             f.defaultValue !== undefined && instance.control.setValue(f.defaultValue, { emitEvent: false });
             this.form.addControl(f.name, instance.control);
             return instance;
@@ -7008,7 +7003,7 @@ class MailboxService {
                 `?access_token=${token}`;
         return url;
     }
-    download(documentId, fileId) {
+    downloadAttachment(documentId, fileId) {
         //new Observable<any>(observe => {
         //  observe.next({});
         //  return {
@@ -7023,13 +7018,13 @@ class MailboxService {
     removeAttachment(recipientId, fileId) {
         return this._http.delete(`/api/attachments/${recipientId}/${fileId}`);
     }
-    read(id, read, folderId, received) {
+    markAsRead(id, read, folderId, received) {
         return this._http.put(`/api/mailbox/read/${id}`, undefined, { params: { read } }).pipe(tap(() => folderId && received && this._updateunreadcounter(received, folderId, read ? 1 : -1)));
     }
-    comments(id, before) {
+    listComments(id, before) {
         return this._http.get(`/api/comments/${id}`, { params: { before: new Date(before).toJSON() } });
     }
-    tags(id, tags) {
+    updateRecipientTags(id, tags) {
         return this._http.put(`/api/mailbox/tag/${id}`, { tags }).pipe(tap(() => {
             this._change$.next({ id, tags });
         }));
@@ -7040,7 +7035,7 @@ class MailboxService {
      * @param stateId
      * @param userId substitute
      */
-    changeState(documentId, stateId, userId) {
+    setDocumentState(documentId, stateId, userId) {
         return this._http.put(`/api/mailbox/changestate/${documentId}`, { stateId, userId });
     }
     move(id, folderId) {
@@ -7051,10 +7046,10 @@ class MailboxService {
             });
         }));
     }
-    checkOut(recipientId, version, attachmentId) {
+    checkOutAttachment(recipientId, version, attachmentId) {
         return this._http.put(`/api/attachments/${recipientId}/${attachmentId}/checkout`, null, { params: { version } });
     }
-    checkIn(recipientId, version, attachmentId, file) {
+    checkInAttachment(recipientId, version, attachmentId, file) {
         const fd = new FormData();
         fd.append(file.name, file);
         const req = new HttpRequest('PUT', `/api/attachments/${recipientId}/${attachmentId}/checkin?version=${version}`, fd, {
@@ -7149,23 +7144,23 @@ class MailboxService {
      * retrieve senders
      * @param name
      */
-    senders(name) {
+    listSenders(name) {
         return this._http.get('/api/mailbox/senders/', {
             params: {
                 name
             }
         });
     }
-    flag(id, flag) {
+    toggleFlag(id, flag) {
         return this._http.put(`/api/mailbox/flag/${id}?flag=${flag}`, null).pipe(tap(() => this._change$.next({ id, flag })));
     }
-    viewedcomments(id) {
+    markCommentsViewed(id) {
         return this._http.put(`/api/comments/viewed/${id}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap((e) => this._change$.next({ id, viewed: e.time })));
     }
-    typing(id) {
+    reportTyping(id) {
         return this._http.put(`/api/comments/typing/${id}`, {}, { headers: { 'no-progress': 'true' } });
     }
-    editing(id) {
+    reportEditing(id) {
         return this._http.put(`/api/mailbox/editing/${id}`, {}, { headers: { 'no-progress': 'true' } });
     }
     copy(id) {
@@ -7179,22 +7174,22 @@ class MailboxService {
     comment(id, options) {
         return this._http.post(`/api/comments/${id}`, options);
     }
-    commentupdate(id, commentId, options) {
+    updateComment(id, commentId, options) {
         return this._http.put(`/api/comments/edit/${id}/${commentId}`, options);
     }
-    info(documentId) {
+    getDocumentInfo(documentId) {
         return this._http.get(`/api/mailbox/info/${documentId}`);
     }
-    timeline(documentId) {
+    listTimeline(documentId) {
         return this._http.get(`/api/mailbox/timeline/${documentId}`);
     }
-    vote(id, commentId, value) {
+    voteComment(id, commentId, value) {
         return this._http.post(`/api/comments/vote/${id}/${commentId}`, {}, { params: { value: value.toString() } });
     }
-    votes(id, commentId) {
+    listCommentVotes(id, commentId) {
         return this._http.get(`/api/comments/votes/${id}/${commentId}`);
     }
-    edits(id, commentId) {
+    listCommentEdits(id, commentId) {
         return this._http.get(`/api/comments/edits/${id}/${commentId}`);
     }
     findAll(filter, options) {
@@ -7208,6 +7203,12 @@ class MailboxService {
             this._change$.next(m);
         }));
     }
+    /**
+     *
+     * @param form
+     * @param model
+     * @returns
+     */
     create(form, model) {
         //  return this._wrap(form, p =>
         //    this._http.post<RecipientModel<T>>('/api/mail', model, {
@@ -7223,6 +7224,12 @@ class MailboxService {
             }
         })), this._sync());
     }
+    /**
+     *
+     * @param id
+     * @param read
+     * @returns
+     */
     get(id, read) {
         return this._http.get(`/api/mail/${id}`).pipe(tap((m) => read === false && m.read === true &&
             this._updateunreadcounter(m.received, m.folderId, -1)));
@@ -7275,25 +7282,26 @@ class MailboxService {
     delete(id) {
         return this._http.delete(`/api/mail/${id}`).pipe(tap(() => this._delete$.next(id)));
     }
-    removecomment(id) {
-        return this._http.delete(`/api/comments/${id}`);
-    }
-    post(form, model) {
-        return this._wrap(form, p => this._http.post('/api/mail', model, {
-            params: {
-                go: true,
-                form,
-                ...p
-            }
-        }));
-    }
+    toggleRemoveComment(id, value) {
+        return this._http.delete(`/api/comments/${id}?value=${value}`);
+    }
+    //post<T = any>(form: string, model?: T): Observable<RecipientModel<T>> {
+    //  return this._wrap(form, p =>
+    //    this._http.post<RecipientModel<T>>('/api/mail', model, {
+    //      params: {
+    //        go: true,
+    //        form,
+    //        ...p
+    //      }
+    //    }));
+    //}
     submit(id, version, form, model) {
         return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&go=true`, model, { params })), this._sync());
     }
     send(id, version, form, model, action, actionArgs, read, folderId, received) {
         return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&action=${action}`, model, { params: { ...params, ...actionArgs } })), tap(() => read === false && received && folderId && this._updateunreadcounter(received, folderId, -1)), this._sync());
     }
-    events(starting, ending, contains) {
+    listEvents(starting, ending, contains) {
         return this._http.get(`/api/events`, {
             params: cleanup({
                 starting: starting.toJSON(),
@@ -7302,7 +7310,7 @@ class MailboxService {
             })
         });
     }
-    changeEvent(id, options) {
+    updateEvent(id, options) {
         return this._http.put(`/api/events/${id}`, cleanup(options));
     }
     /**
@@ -8111,7 +8119,7 @@ class BrowseFilterComponent {
             this.filters = { axes, cube };
         }
         this.senders$ = this.sendername.valueChanges.
-            pipe(takeUntil(this._destroy), debounceTime(250), filter((v) => isString(v)), switchMap((v) => this._mailbox.senders(v)));
+            pipe(takeUntil(this._destroy), debounceTime(250), filter((v) => isString(v)), switchMap((v) => this._mailbox.listSenders(v)));
         this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(FILTER_DEBOUNCE)).
             subscribe(v => this.valuesChange.emit(cleanup(v)));
         this.form.patchValue(this.values, { emitEvent: false });
@@ -8786,7 +8794,7 @@ class AttachmentsComponent {
         return this.model.attachments.filter(a => a.fileName === item.fileName && a != item);
     }
     async download(item) {
-        //this._mailbox.download(this.model.documentId, item.id).subscribe(data => {
+        //this._mailbox.downloadAttachment(this.model.documentId, item.id).subscribe(data => {
         //const blob = new Blob([data], { type: item.contentType });
         //if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE
         //  window.navigator.msSaveBlob(blob, item.fileName);
@@ -9320,7 +9328,7 @@ class BrowseItemsComponent {
     dragStarted(event) {
     }
     toggleRead(item) {
-        this._mailbox.read(item.id, !item.read, item.folderId, item.received).
+        this._mailbox.markAsRead(item.id, !item.read, item.folderId, item.received).
             subscribe(() => item.read = !item.read);
     }
     select(id) {
@@ -9335,7 +9343,7 @@ class BrowseItemsComponent {
         this._retrieve(mail).subscribe(item => {
             if (item.tags && item.tags.indexOf(tag) > -1)
                 return;
-            this._mailbox.tags(mail.id, item.tags).subscribe(() => {
+            this._mailbox.updateRecipientTags(mail.id, item.tags).subscribe(() => {
                 if (!item.tags)
                     item.tags = [tag];
                 else
@@ -9406,7 +9414,7 @@ class BrowseItemsComponent {
     flag(item, evt) {
         const extra = item;
         extra.working = true;
-        this._mailbox.flag(item.id, !item.flag).subscribe({
+        this._mailbox.toggleFlag(item.id, !item.flag).subscribe({
             next: () => {
                 item.flag = !item.flag;
                 extra.working = false;
@@ -9729,7 +9737,7 @@ class TagsComponent {
         setTimeout(() => this.inputElement.nativeElement.focus());
     }
     _save() {
-        this._mailbox.tags(this._data.id, this._data.tags.map(t => t.name)).subscribe();
+        this._mailbox.updateRecipientTags(this._data.id, this._data.tags.map(t => t.name)).subscribe();
     }
     add(event) {
         if (!this.auto.isOpen) {
@@ -10058,7 +10066,7 @@ class ComposeFormComponent {
         const extra = this.model, { flag } = this.model;
         extra.working = true;
         this.working = true;
-        this._mailbox.flag(this.model.id, !flag).subscribe({
+        this._mailbox.toggleFlag(this.model.id, !flag).subscribe({
             next: () => {
                 this.model.flag = !flag;
                 extra.working = false;
@@ -13294,7 +13302,7 @@ class EditCommentComponent {
     }
     ok(evt) {
         this.sending = true;
-        this._mailbox.commentupdate(this.data.documentId, this.data.id, evt).subscribe(c => this._popupRef.close(c), () => {
+        this._mailbox.updateComment(this.data.documentId, this.data.id, evt).subscribe(c => this._popupRef.close(c), () => {
             this.sending = false;
             this._sb.error();
         });
@@ -13386,7 +13394,7 @@ class CommentEditsComponent {
         this.resource = _data.resource;
     }
     ngOnInit() {
-        this.versions = this._mailbox.edits(this._data.documentId, this._data.id);
+        this.versions = this._mailbox.listCommentEdits(this._data.documentId, this._data.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CommentEditsComponent, deps: [{ token: POPUP_DATA }, { token: MailboxService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CommentEditsComponent, isStandalone: false, selector: "bizdoc-comment-edits", ngImport: i0, template: "<span class=\"mat-h2\">{{'History' | translate}}</span>\r\n\r\n@for (v of versions | async; track v) {\r\n  <div class=\"comment\">\r\n    <p [innerHTML]=\"v.text|taggingHtml:resource\"></p>\r\n    @if (v.byId || byId) {\r\n      <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n    }\r\n    <small>{{v.time | amCalendar}}</small>\r\n  </div>\r\n}\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
@@ -13409,18 +13417,18 @@ class CommentLikesComponent {
         });
     }
     ngOnInit() {
-        this.votes = this._mailbox.votes(this._data.documentId, this._data.id);
+        this.votes = this._mailbox.listCommentVotes(this._data.documentId, this._data.id);
     }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CommentLikesComponent, deps: [{ token: POPUP_DATA }, { token: MailboxService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CommentLikesComponent, isStandalone: false, selector: "bizdoc-comment-votes", ngImport: i0, template: "<span class=\"mat-h2\">{{'Votes' | translate}}</span>\r\n@for (v of votes | async; track v) {\r\n  <div class=\"vote\">\r\n    <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n    <button mat-icon-button><mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon></button>\r\n    <br />\r\n    <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n  </div>\r\n}\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: "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: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CommentLikesComponent, isStandalone: false, selector: "bizdoc-comment-votes", ngImport: i0, template: "<span class=\"mat-h2\">{{'Votes' | translate}}</span>\r\n@for (v of votes | async; track v) {\r\n  <div class=\"vote\">\r\n    <div class=\"row\">\r\n      <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n      <span class=\"divider\"></span>\r\n      <mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon>\r\n    </div>\r\n    <br />\r\n    <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n  </div>\r\n}\r\n", styles: [":host{padding:8px}\n"], dependencies: [{ kind: "component", type: i7.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: "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: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CommentLikesComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-comment-votes', template: "<span class=\"mat-h2\">{{'Votes' | translate}}</span>\r\n@for (v of votes | async; track v) {\r\n  <div class=\"vote\">\r\n    <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n    <button mat-icon-button><mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon></button>\r\n    <br />\r\n    <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n  </div>\r\n}\r\n", styles: [":host{padding:8px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-comment-votes', template: "<span class=\"mat-h2\">{{'Votes' | translate}}</span>\r\n@for (v of votes | async; track v) {\r\n  <div class=\"vote\">\r\n    <div class=\"row\">\r\n      <bizdoc-identity-name class=\"mat-body\" [identity]=\"v.userId\" [by]=\"v.byId\"></bizdoc-identity-name>\r\n      <span class=\"divider\"></span>\r\n      <mat-icon>{{v.voted === 1 ? 'thumb_up_alt' : 'thumb_down_alt'}}</mat-icon>\r\n    </div>\r\n    <br />\r\n    <small bizdocTooltip=\"{{v.time | amCalendar }}\">{{v.time | amTimeAgo}}</small>\r\n  </div>\r\n}\r\n", styles: [":host{padding:8px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POPUP_DATA]
@@ -13494,7 +13502,7 @@ class CommentComponent {
     }
     vote(value, event) {
         value = this.item.voted !== value ? value : 0;
-        this._mailbox.vote(this.model.documentId, this.item.id, value).subscribe(() => {
+        this._mailbox.voteComment(this.model.documentId, this.item.id, value).subscribe(() => {
             if (this.item.votes === undefined)
                 this.item.votes = value;
             else if (value === 0)
@@ -13523,17 +13531,12 @@ class CommentComponent {
     _open(component, data) {
         return this._popup.open(component, this.bodyElement, { position: 'start', data });
     }
-    delete() {
-        this._ps.ask('DeleteCommentAsk', undefined, {
-            ok: 'Delete',
-            color: 'warn'
-        }).subscribe(ok => {
-            ok && this._mailbox.removecomment(this.item.id).subscribe({
-                next: () => {
-                    this.item.deleted = true;
-                    this.deleted.emit();
-                }, error: () => this._ps.error()
-            });
+    delete(value) {
+        this._mailbox.toggleRemoveComment(this.item.id, value).subscribe({
+            next: () => {
+                this.item.deleted = value;
+                this.deleted.emit(value);
+            }, error: this._ps.error.bind(this)
         });
     }
     edits() {
@@ -13560,13 +13563,13 @@ class CommentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CommentComponent, deps: [{ token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: ChatInfo }, { token: AccountService }, { token: Popup }, { token: i2$3.Overlay }, { token: MailboxService }, { token: i0.ViewContainerRef }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CommentComponent, isStandalone: false, 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\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\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>\r\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>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i2$3.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.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: "20.0.6", type: CommentComponent, isStandalone: false, 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\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i2$3.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.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: "20.0.6", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'bizdoc-comment', host: {
                         class: 'comment'
-                    }, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete()\">{{'Delete'|translate}}</button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\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>\r\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>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n" }]
+                    }, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small class=\"flex\" bizdocTooltip=\"{{item.edited || item.time | amCalendar }}\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [{ type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: ChatInfo }, { type: AccountService }, { type: Popup }, { type: i2$3.Overlay }, { type: MailboxService }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -13635,10 +13638,10 @@ class CommentsComponent {
         });
         this._messaging.commentDelete$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).subscribe(e => {
             const comment = this.model.comments.find(c => c.id === e.id);
-            comment.deleted = true;
+            comment.deleted = e.deleted;
             this.change.emit();
         });
-        this._textChange.pipe(debounceTime(TYPING_NOTIFY$1), takeUntil(this._destroy)).subscribe(() => this._mailbox.typing(this.model.documentId).subscribe());
+        this._textChange.pipe(debounceTime(TYPING_NOTIFY$1), takeUntil(this._destroy)).subscribe(() => this._mailbox.reportTyping(this.model.documentId).subscribe());
     }
     _formatUserElement(person) {
         if (this._config.chat !== false)
@@ -13679,8 +13682,6 @@ class CommentsComponent {
         }
         return n;
     }
-    deleted(item) {
-    }
     reply(item) {
         this._replyTo = item;
         this._accounts.get(item.byId || item.userId).
@@ -13708,7 +13709,7 @@ class CommentsComponent {
     onScroll(evt) {
         if (evt.target.scrollTop === 0 && this.model.comments.length && !this._top) {
             const time = this.model.comments.sort((c0, c1) => c0.time > c1.time ? 1 : -1)[0].time;
-            this._mailbox.comments(this.model.documentId, time).subscribe(cs => {
+            this._mailbox.listComments(this.model.documentId, time).subscribe(cs => {
                 if (cs.length === 0)
                     this._top = true;
                 else {
@@ -13736,7 +13737,7 @@ class CommentsComponent {
     _viewed() {
         const { viewed, comments, documentId } = this.model;
         comments.length && (!viewed || comments.findIndex(c => c.time > viewed) > -1) &&
-            this._mailbox.viewedcomments(documentId).subscribe(e => {
+            this._mailbox.markCommentsViewed(documentId).subscribe(e => {
                 this.model.viewed = e.time;
                 this.change.emit();
             });
@@ -13772,13 +13773,13 @@ class CommentsComponent {
             window.localStorage.setItem(id, this.input.text);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", 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: "20.0.6", type: CommentsComponent, isStandalone: false, 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) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container role=\"listitem\">\r\n      @if (!c.deleted || showDeleted) {\r\n        <bizdoc-comment\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\"\r\n          (deleted)=\"deleted(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CommentsComponent, isStandalone: false, 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) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container role=\"listitem\">\r\n      @if (!c.deleted || showDeleted) {\r\n        <bizdoc-comment\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\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}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}\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: "20.0.6", ngImport: i0, type: CommentsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'bizdoc-comments', host: {
                         class: 'comments'
-                    }, template: "@if (!model.comments.length) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container role=\"listitem\">\r\n      @if (!c.deleted || showDeleted) {\r\n        <bizdoc-comment\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\"\r\n          (deleted)=\"deleted(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\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"] }]
+                    }, template: "@if (!model.comments.length) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container role=\"listitem\">\r\n      @if (!c.deleted || showDeleted) {\r\n        <bizdoc-comment\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\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}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: ChatInfo }, { type: MailboxService }, { type: HubService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -16713,7 +16714,7 @@ class DocumentResolver {
         this._mailbox = _mailbox;
     }
     onResolve(params) {
-        return this._mailbox.info((params['id'].decodeId()));
+        return this._mailbox.getDocumentInfo((params['id'].decodeId()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DocumentResolver, deps: [{ token: MailboxService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DocumentResolver }); }
@@ -16917,7 +16918,7 @@ class ScheduleViewComponent {
         }
         this.starting = dates[0],
             this.ending = dates[dates.length - 1];
-        this._mailbox.events(this.starting, this.ending).subscribe({
+        this._mailbox.listEvents(this.starting, this.ending).subscribe({
             next: r => {
                 const data = r.map(e => {
                     return {
@@ -16935,7 +16936,7 @@ class ScheduleViewComponent {
         });
     }
     drag(_) {
-        this._mailbox.changeEvent(1, { starting: undefined }).subscribe({ error: () => this._sb.error() });
+        this._mailbox.updateEvent(1, { starting: undefined }).subscribe({ error: () => this._sb.error() });
     }
     nav(e) {
         switch (e.action) {
@@ -19527,11 +19528,11 @@ class HomeBase {
         window.dispatchEvent(new Event('resize'));
     }
     mails() {
-        this._session.inboxTouch();
+        this._session.markInboxAsTouched();
     }
     notifs(_) {
         this._session.profile.notifications.length &&
-            this._session.notificationsTouch();
+            this._session.markNotificationsAsTouched();
     }
     _is(name, val) {
         if (val === undefined)
@@ -19627,11 +19628,11 @@ class QuickNotificationsComponent extends NotificationsComponentBase {
         this._service.mute(item.id, mute);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: QuickNotificationsComponent, deps: [{ token: PopupRef }, { token: RouterImpl }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: QuickNotificationsComponent, isStandalone: false, selector: "bizdoc-notifications", usesInheritance: true, ngImport: i0, template: "<mat-nav-list role=\"list\">\r\n  <!--dense-->\r\n  @for (n of notifications | sort: 'sent' : 'desc' | slice:0:9; track n; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 *ngComponentOutlet=\"n.comp; injector: n.injector\" matListItemTitle></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amCalendar\">{{n.sent | amTimeAgo }}</span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [matMenuTriggerData]=\"{muted: false}\" class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-template matMenuContent let-muted=\"muted\">\r\n          <button mat-menu-item (click)=\"mute(n, true)\">{{ (!(muted | async) ? 'Mute': 'Unmute') | translate}}</button>\r\n        </ng-template>\r\n      </mat-menu>\r\n    </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n<div class=\"tools row\">\r\n  <a (click)=\"all()\">{{'ShowAll'|translate}}</a>&nbsp;\r\n  <span class=\"divider\"></span>\r\n  <a (click)='options()'>{{'Options'|translate}}</a>\r\n</div>\r\n", styles: [".item .tool{opacity:.1}.item:hover .tool{opacity:1}.tools{font-variant-caps:all-small-caps;font-size:medium;padding:8px}\n"], dependencies: [{ kind: "directive", type: i9.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i2$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.SlicePipe, name: "slice" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: QuickNotificationsComponent, isStandalone: false, selector: "bizdoc-notifications", usesInheritance: true, ngImport: i0, template: "<mat-nav-list role=\"list\">\r\n  <!--dense-->\r\n  @for (n of notifications | sort: 'sent' : 'desc' | slice:0:9; track n; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 *ngComponentOutlet=\"n.comp; injector: n.injector\" matListItemTitle></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amCalendar\">{{n.sent | amTimeAgo }}</span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [matMenuTriggerData]=\"{muted: false}\"\r\n              matListItemMeta class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-template matMenuContent let-muted=\"muted\">\r\n          <button mat-menu-item (click)=\"mute(n, true)\">{{ (!(muted | async) ? 'Mute': 'Unmute') | translate}}</button>\r\n        </ng-template>\r\n      </mat-menu>\r\n    </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n<div class=\"tools row\">\r\n  <a (click)=\"all()\">{{'ShowAll'|translate}}</a>&nbsp;\r\n  <span class=\"divider\"></span>\r\n  <a (click)='options()'>{{'Options'|translate}}</a>\r\n</div>\r\n", styles: [".item .tool{opacity:.1}.item:hover .tool{opacity:1}.tools{font-variant-caps:all-small-caps;font-size:medium;padding:8px}\n"], dependencies: [{ kind: "directive", type: i9.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i2$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.SlicePipe, name: "slice" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: QuickNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-notifications', template: "<mat-nav-list role=\"list\">\r\n  <!--dense-->\r\n  @for (n of notifications | sort: 'sent' : 'desc' | slice:0:9; track n; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 *ngComponentOutlet=\"n.comp; injector: n.injector\" matListItemTitle></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amCalendar\">{{n.sent | amTimeAgo }}</span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [matMenuTriggerData]=\"{muted: false}\" class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-template matMenuContent let-muted=\"muted\">\r\n          <button mat-menu-item (click)=\"mute(n, true)\">{{ (!(muted | async) ? 'Mute': 'Unmute') | translate}}</button>\r\n        </ng-template>\r\n      </mat-menu>\r\n    </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n<div class=\"tools row\">\r\n  <a (click)=\"all()\">{{'ShowAll'|translate}}</a>&nbsp;\r\n  <span class=\"divider\"></span>\r\n  <a (click)='options()'>{{'Options'|translate}}</a>\r\n</div>\r\n", styles: [".item .tool{opacity:.1}.item:hover .tool{opacity:1}.tools{font-variant-caps:all-small-caps;font-size:medium;padding:8px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-notifications', template: "<mat-nav-list role=\"list\">\r\n  <!--dense-->\r\n  @for (n of notifications | sort: 'sent' : 'desc' | slice:0:9; track n; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 *ngComponentOutlet=\"n.comp; injector: n.injector\" matListItemTitle></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amCalendar\">{{n.sent | amTimeAgo }}</span>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" [matMenuTriggerData]=\"{muted: false}\"\r\n              matListItemMeta class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-template matMenuContent let-muted=\"muted\">\r\n          <button mat-menu-item (click)=\"mute(n, true)\">{{ (!(muted | async) ? 'Mute': 'Unmute') | translate}}</button>\r\n        </ng-template>\r\n      </mat-menu>\r\n    </mat-list-item>\r\n  }\r\n</mat-nav-list>\r\n<div class=\"tools row\">\r\n  <a (click)=\"all()\">{{'ShowAll'|translate}}</a>&nbsp;\r\n  <span class=\"divider\"></span>\r\n  <a (click)='options()'>{{'Options'|translate}}</a>\r\n</div>\r\n", styles: [".item .tool{opacity:.1}.item:hover .tool{opacity:1}.tools{font-variant-caps:all-small-caps;font-size:medium;padding:8px}\n"] }]
         }], ctorParameters: () => [{ type: PopupRef }, { type: RouterImpl }] });
 
 let DocumentListingComponent = class DocumentListingComponent {
@@ -19806,7 +19807,7 @@ class SearchService {
                     });
             });
             // senders from server
-            this._mailbox.senders(value).subscribe(r => r.forEach(s => results.push({
+            this._mailbox.listSenders(value).subscribe(r => r.forEach(s => results.push({
                 portal: new ComponentPortal(PathListingComponent),
                 model: {
                     path: ['mailbox', 'f', 'ib'],
@@ -19818,7 +19819,7 @@ class SearchService {
             })));
             // events
             const today = new Date();
-            this._mailbox.events(today, new Date(today.valueOf() + 604800000), value).
+            this._mailbox.listEvents(today, new Date(today.valueOf() + 604800000), value).
                 subscribe(r => r.forEach(e => results.push({
                 portal: new ComponentPortal(PathListingComponent),
                 model: {
@@ -21461,7 +21462,7 @@ class HomeComponent extends HomeBase {
     }
     notifs(evt) {
         this.profile.notifications.length &&
-            this._session.notificationsTouch();
+            this._session.markNotificationsAsTouched();
         this._popup.open(QuickNotificationsComponent, evt.target, { position: 'below' });
         super.notifs();
     }
@@ -22545,7 +22546,7 @@ class DocumentResolveService {
                 return of(item);
         }
         const id = route.paramMap.get('id').decodeId();
-        return this._mailbox.info(id).pipe(catchError$1(e => {
+        return this._mailbox.getDocumentInfo(id).pipe(catchError$1(e => {
             this._sb.error();
             throw e;
         }));
@@ -23430,8 +23431,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }] } });
 
 let DateRangeField = class DateRangeField {
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     constructor(_fb) {
         this._fb = _fb;
+        this.subscriptSizing = 'fixed';
         this.isMobile = isMobile();
         this.control = this._fb.group({
             start: this._fb.control(null),
@@ -23449,14 +23455,14 @@ let DateRangeField = class DateRangeField {
         this.inp.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DateRangeField, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DateRangeField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "inp", first: true, predicate: ["inp"], descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance>\r\n  <mat-label>{{label }}</mat-label>\r\n  <mat-date-range-input [formGroup]=\"control\" [rangePicker]=\"picker\"\r\n                        [required]=\"required\" [min]=\"min\" [max]=\"max\">\r\n    <input matStartDate formControlName=\"start\" [placeholder]=\"startPlaceholder\" #inp>\r\n    <input matEndDate formControlName=\"end\" [placeholder]=\"endPlaceholder\">\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n  @if (hint) {\r\n  <mat-hint> {{ hint }}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n} @else {\r\n<span>{{control.controls.start.value|dateRange:control.controls.end.value}}</span>\r\n}\r\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.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: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: DateRangePipe, name: "dateRange" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DateRangeField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "inp", first: true, predicate: ["inp"], descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label }}</mat-label>\r\n  <mat-date-range-input [formGroup]=\"control\" [rangePicker]=\"picker\"\r\n                        [required]=\"required\" [min]=\"min\" [max]=\"max\">\r\n    <input matStartDate formControlName=\"start\" [placeholder]=\"startPlaceholder\" #inp>\r\n    <input matEndDate formControlName=\"end\" [placeholder]=\"endPlaceholder\">\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n  @if (hint) {\r\n  <mat-hint> {{ hint }}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n} @else {\r\n<span>{{control.controls.start.value|dateRange:control.controls.end.value}}</span>\r\n}\r\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.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: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: DateRangePipe, name: "dateRange" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 DateRangeField = __decorate([
     BizDoc({ selector: 'date-range-control' })
 ], DateRangeField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DateRangeField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance>\r\n  <mat-label>{{label }}</mat-label>\r\n  <mat-date-range-input [formGroup]=\"control\" [rangePicker]=\"picker\"\r\n                        [required]=\"required\" [min]=\"min\" [max]=\"max\">\r\n    <input matStartDate formControlName=\"start\" [placeholder]=\"startPlaceholder\" #inp>\r\n    <input matEndDate formControlName=\"end\" [placeholder]=\"endPlaceholder\">\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n  @if (hint) {\r\n  <mat-hint> {{ hint }}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n} @else {\r\n<span>{{control.controls.start.value|dateRange:control.controls.end.value}}</span>\r\n}\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label }}</mat-label>\r\n  <mat-date-range-input [formGroup]=\"control\" [rangePicker]=\"picker\"\r\n                        [required]=\"required\" [min]=\"min\" [max]=\"max\">\r\n    <input matStartDate formControlName=\"start\" [placeholder]=\"startPlaceholder\" #inp>\r\n    <input matEndDate formControlName=\"end\" [placeholder]=\"endPlaceholder\">\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n  @if (hint) {\r\n  <mat-hint> {{ hint }}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n} @else {\r\n<span>{{control.controls.start.value|dateRange:control.controls.end.value}}</span>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { inp: [{
                 type: ViewChild,
                 args: ['inp']
@@ -23464,9 +23470,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 let DateField = class DateField {
     constructor() {
+        this.subscriptSizing = 'fixed';
         this.isMobile = isMobile();
         this.control = new FormControl();
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     focus() { this.input.focus(); }
     ngOnInit() {
         this.required && this.control.addValidators(Validators.required);
@@ -23474,14 +23485,14 @@ let DateField = class DateField {
         this.max && this.control.addValidators(Validators.max(this.max));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DateField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DateField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <input matInput [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n      [required]=\"required\" [min]=\"min\" [max]=\"max\"\r\n      [matDatepicker]=\"picker\" />\r\n      <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n      <mat-datepicker #picker [touchUi]=\"isMobile\"></mat-datepicker>\r\n      @if (hint) {\r\n        <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n      }\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @if (control.value) {\r\n      <span>{{control.value | amDateFormat: 'll'}}</span>\r\n    }\r\n  }\r\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.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: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: "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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DateField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <input matInput [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n         [required]=\"required\" [min]=\"min\" [max]=\"max\"\r\n         [matDatepicker]=\"picker\" />\r\n  <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n  <mat-datepicker #picker [touchUi]=\"isMobile\"></mat-datepicker>\r\n  @if (hint) {\r\n  <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n  }\r\n@else {\r\n  @if (control.value) {\r\n<span>{{control.value | amDateFormat: 'll'}}</span>\r\n  }\r\n}\r\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.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: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: "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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 DateField = __decorate([
     BizDoc({ selector: 'date-control' })
 ], DateField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DateField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <input matInput [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n      [required]=\"required\" [min]=\"min\" [max]=\"max\"\r\n      [matDatepicker]=\"picker\" />\r\n      <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n      <mat-datepicker #picker [touchUi]=\"isMobile\"></mat-datepicker>\r\n      @if (hint) {\r\n        <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n      }\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @if (control.value) {\r\n      <span>{{control.value | amDateFormat: 'll'}}</span>\r\n    }\r\n  }\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <input matInput [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n         [required]=\"required\" [min]=\"min\" [max]=\"max\"\r\n         [matDatepicker]=\"picker\" />\r\n  <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\r\n  <mat-datepicker #picker [touchUi]=\"isMobile\"></mat-datepicker>\r\n  @if (hint) {\r\n  <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n  }\r\n@else {\r\n  @if (control.value) {\r\n<span>{{control.value | amDateFormat: 'll'}}</span>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput]
@@ -23520,8 +23531,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 let InputField = class InputField {
     constructor() {
+        this.subscriptSizing = 'fixed';
         this.control = new FormControl();
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     ngOnInit() {
         switch (this.type) {
             case FieldKind.EmailAddress:
@@ -23546,14 +23562,14 @@ let InputField = class InputField {
     }
     focus() { this.input.focus(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: InputField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <input matInput [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n      [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\" />\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (control.hasError('minLength')) {\r\n        <mat-error [innerHTML]=\"'MinLengthErr'|translate:(label|localizedString):minLength\"></mat-error>\r\n      }\r\n      @if (control.hasError('maxLength')) {\r\n        <mat-error [innerHTML]=\"'MaxLengthErr'|translate:(label|localizedString):maxLength\"></mat-error>\r\n      }\r\n      @if (control.hasError('email')) {\r\n        <mat-error [innerHTML]=\"'EmailErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (control.hasError('pattern')) {\r\n        <mat-error [innerHTML]=\"'PatternErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @switch (kind) {\r\n      @case ('PhoneNumber') {\r\n        <a [href]=\"'tel:'+control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('EmailAddress') {\r\n        <a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Url') {\r\n        <a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Password') {\r\n        <span>\r\n        </span>\r\n      }\r\n      @default {\r\n        <span>{{control.value}}</span>\r\n      }\r\n    }\r\n  }\r\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: InputField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <input matInput [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n         [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\" />\r\n  @if (hint) {\r\n  <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n  @if (control.hasError('minLength')) {\r\n  <mat-error [innerHTML]=\"'MinLengthErr'|translate:(label|localizedString):minLength\"></mat-error>\r\n  }\r\n  @if (control.hasError('maxLength')) {\r\n  <mat-error [innerHTML]=\"'MaxLengthErr'|translate:(label|localizedString):maxLength\"></mat-error>\r\n  }\r\n  @if (control.hasError('email')) {\r\n  <mat-error [innerHTML]=\"'EmailErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n  @if (control.hasError('pattern')) {\r\n  <mat-error [innerHTML]=\"'PatternErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n  } @else {\r\n    @switch (kind) {\r\n      @case ('PhoneNumber') {\r\n<a [href]=\"'tel:'+control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('EmailAddress') {\r\n<a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Url') {\r\n<a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Password') {\r\n<span>\r\n</span>\r\n      }\r\n      @default {\r\n<span>{{control.value}}</span>\r\n      }\r\n    }\r\n  }\r\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 InputField = __decorate([
     BizDoc({ selector: 'text-control' })
 ], InputField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <input matInput [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n      [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\" />\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (control.hasError('minLength')) {\r\n        <mat-error [innerHTML]=\"'MinLengthErr'|translate:(label|localizedString):minLength\"></mat-error>\r\n      }\r\n      @if (control.hasError('maxLength')) {\r\n        <mat-error [innerHTML]=\"'MaxLengthErr'|translate:(label|localizedString):maxLength\"></mat-error>\r\n      }\r\n      @if (control.hasError('email')) {\r\n        <mat-error [innerHTML]=\"'EmailErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (control.hasError('pattern')) {\r\n        <mat-error [innerHTML]=\"'PatternErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @switch (kind) {\r\n      @case ('PhoneNumber') {\r\n        <a [href]=\"'tel:'+control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('EmailAddress') {\r\n        <a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Url') {\r\n        <a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Password') {\r\n        <span>\r\n        </span>\r\n      }\r\n      @default {\r\n        <span>{{control.value}}</span>\r\n      }\r\n    }\r\n  }\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label |localizedString}}</mat-label>\r\n  <input matInput [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n         [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\" />\r\n  @if (hint) {\r\n  <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n  @if (control.hasError('minLength')) {\r\n  <mat-error [innerHTML]=\"'MinLengthErr'|translate:(label|localizedString):minLength\"></mat-error>\r\n  }\r\n  @if (control.hasError('maxLength')) {\r\n  <mat-error [innerHTML]=\"'MaxLengthErr'|translate:(label|localizedString):maxLength\"></mat-error>\r\n  }\r\n  @if (control.hasError('email')) {\r\n  <mat-error [innerHTML]=\"'EmailErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n  @if (control.hasError('pattern')) {\r\n  <mat-error [innerHTML]=\"'PatternErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n  } @else {\r\n    @switch (kind) {\r\n      @case ('PhoneNumber') {\r\n<a [href]=\"'tel:'+control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('EmailAddress') {\r\n<a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Url') {\r\n<a [href]=\"control.value\">{{control.value}}</a>\r\n      }\r\n      @case ('Password') {\r\n<span>\r\n</span>\r\n      }\r\n      @default {\r\n<span>{{control.value}}</span>\r\n      }\r\n    }\r\n  }\r\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput]
@@ -23561,8 +23577,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 let NumericField = class NumericField {
     constructor() {
+        this.subscriptSizing = 'fixed';
         this.control = new FormControl();
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     focus() { this.input.focus(); }
     ngOnInit() {
         this.required && this.control.addValidators(Validators.required);
@@ -23570,14 +23591,14 @@ let NumericField = class NumericField {
         this.max && this.control.addValidators(Validators.max(this.max));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumericField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NumericField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <input matInput type=\"number\" [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n      [required]=\"required\" [min]=\"min\" [max]=\"max\" [pattern]=\"pattern\" />\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    {{control.value|number}}\r\n  }\r\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NumericField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <input matInput type=\"number\" [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n         [required]=\"required\" [min]=\"min\" [max]=\"max\" [pattern]=\"pattern\" />\r\n  @if (hint) {\r\n  <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n  } @else {\r\n{{control.value|number}}\r\n  }\r\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 NumericField = __decorate([
     BizDoc({ selector: 'number-control' })
 ], NumericField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumericField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <input matInput type=\"number\" [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n      [required]=\"required\" [min]=\"min\" [max]=\"max\" [pattern]=\"pattern\" />\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    {{control.value|number}}\r\n  }\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n<mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n  <mat-label>{{label|localizedString}}</mat-label>\r\n  <input matInput type=\"number\" [formControl]=control [placeholder]=\"placeholder|localizedString\"\r\n         [required]=\"required\" [min]=\"min\" [max]=\"max\" [pattern]=\"pattern\" />\r\n  @if (hint) {\r\n  <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n  }\r\n  @if (control.hasError('required')) {\r\n  <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n  }\r\n</mat-form-field>\r\n  } @else {\r\n{{control.value|number}}\r\n  }\r\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput]
@@ -23586,20 +23607,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 let SelectField = class SelectField extends OptionsControlField {
     constructor() {
         super(...arguments);
+        this.subscriptSizing = 'fixed';
         this.control = new FormControl();
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     focus() {
         this.select.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectField, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n      [required]=\"required\" [multiple]=\"multiple\">\r\n      @for (o of options; track o) {\r\n        <mat-option [value]=\"o.key\">{{o.value}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>\r\n      @switch (multiple) {\r\n        @case (true) {\r\n          @for (o of control.value; track o; let index = $index) {\r\n            {{optionOf(o)|localizedString}}\r\n            @if (index>0) {\r\n              ,&nbsp;\r\n            }\r\n          }\r\n        }\r\n        @default {\r\n          {{optionOf(control.value)|localizedString}}\r\n        }\r\n      }\r\n    </span>\r\n  }\r\n}\r\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: i2$6.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: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n      [required]=\"required\" [multiple]=\"multiple\">\r\n      @for (o of options; track o) {\r\n        <mat-option [value]=\"o.key\">{{o.value}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>\r\n      @switch (multiple) {\r\n        @case (true) {\r\n          @for (o of control.value; track o; let index = $index) {\r\n            {{optionOf(o)|localizedString}}\r\n            @if (index>0) {\r\n              ,&nbsp;\r\n            }\r\n          }\r\n        }\r\n        @default {\r\n          {{optionOf(control.value)|localizedString}}\r\n        }\r\n      }\r\n    </span>\r\n  }\r\n}\r\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: i2$6.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: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SelectField = __decorate([
     BizDoc({ selector: 'select-control' })
 ], SelectField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n      [required]=\"required\" [multiple]=\"multiple\">\r\n      @for (o of options; track o) {\r\n        <mat-option [value]=\"o.key\">{{o.value}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>\r\n      @switch (multiple) {\r\n        @case (true) {\r\n          @for (o of control.value; track o; let index = $index) {\r\n            {{optionOf(o)|localizedString}}\r\n            @if (index>0) {\r\n              ,&nbsp;\r\n            }\r\n          }\r\n        }\r\n        @default {\r\n          {{optionOf(control.value)|localizedString}}\r\n        }\r\n      }\r\n    </span>\r\n  }\r\n}\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-select [placeholder]=\"placeholder\" [formControl]=control\r\n      [required]=\"required\" [multiple]=\"multiple\">\r\n      @for (o of options; track o) {\r\n        <mat-option [value]=\"o.key\">{{o.value}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>\r\n      @switch (multiple) {\r\n        @case (true) {\r\n          @for (o of control.value; track o; let index = $index) {\r\n            {{optionOf(o)|localizedString}}\r\n            @if (index>0) {\r\n              ,&nbsp;\r\n            }\r\n          }\r\n        }\r\n        @default {\r\n          {{optionOf(control.value)|localizedString}}\r\n        }\r\n      }\r\n    </span>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { select: [{
                 type: ViewChild,
                 args: [MatSelect]
@@ -23772,7 +23798,7 @@ class FileInput {
         const accept = item.isImage ? 'image/*' :
             '.' + AttachmentInfo.fileExt(item.fileName) + ',' + item.contentType;
         this._promptFileInput({ multiple: false, accept }).then(files => {
-            this._mailbox.checkIn(this._model.id, this._model.version, item.id, files[0]).
+            this._mailbox.checkInAttachment(this._model.id, this._model.version, item.id, files[0]).
                 subscribe({
                 next: a => {
                     delete item.checkedOut;
@@ -23790,7 +23816,7 @@ class FileInput {
         });
     }
     checkOut(item) {
-        this._mailbox.checkOut(this._model.id, this._model.version, item.id).
+        this._mailbox.checkOutAttachment(this._model.id, this._model.version, item.id).
             subscribe(async () => {
             item.checkedOut = true;
             await this.download(item);
@@ -23900,7 +23926,7 @@ class FileInput {
                 // is checked out
                 if (item.checkedOut) {
                     // check in
-                    let observable = this._mailbox.checkIn(this._model.id, this._model.version, item.id, file).
+                    let observable = this._mailbox.checkInAttachment(this._model.id, this._model.version, item.id, file).
                         pipe(
                     //TODO:
                     //             reportProgress(item),
@@ -24061,8 +24087,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 let TextareaField = class TextareaField {
     constructor() {
+        this.subscriptSizing = 'fixed';
         this.control = new FormControl();
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     ngOnInit() {
         this.minLength && this.control.addValidators(Validators.minLength(this.minLength));
         this.maxLength && this.control.addValidators(Validators.maxLength(this.maxLength));
@@ -24070,14 +24101,14 @@ let TextareaField = class TextareaField {
     }
     focus() { this.input.focus(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TextareaField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TextareaField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance class=\"flex\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <textarea matInput [formControl]=control cdkTextareaAutosize [placeholder]=\"placeholder|localizedString\"\r\n    [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\"></textarea>\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (maxLength) {\r\n      <mat-hint align=\"end\">{{control.value?.length || 0}} / {{maxLength}}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  <p [innerHTML]=\"control.value\"></p>\r\n}\r\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TextareaField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance  [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <textarea matInput [formControl]=control cdkTextareaAutosize [placeholder]=\"placeholder|localizedString\"\r\n    [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\"></textarea>\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (maxLength) {\r\n      <mat-hint align=\"end\">{{control.value?.length || 0}} / {{maxLength}}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  <p [innerHTML]=\"control.value\"></p>\r\n}\r\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TextareaField = __decorate([
     BizDoc({ selector: 'textarea-control' })
 ], TextareaField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TextareaField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance class=\"flex\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <textarea matInput [formControl]=control cdkTextareaAutosize [placeholder]=\"placeholder|localizedString\"\r\n    [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\"></textarea>\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (maxLength) {\r\n      <mat-hint align=\"end\">{{control.value?.length || 0}} / {{maxLength}}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  <p [innerHTML]=\"control.value\"></p>\r\n}\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance  [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <textarea matInput [formControl]=control cdkTextareaAutosize [placeholder]=\"placeholder|localizedString\"\r\n    [required]=\"required\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" [pattern]=\"pattern\"></textarea>\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    @if (maxLength) {\r\n      <mat-hint align=\"end\">{{control.value?.length || 0}} / {{maxLength}}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  <p [innerHTML]=\"control.value\"></p>\r\n}\r\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput]
@@ -24340,53 +24371,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 let AddressField = class AddressField {
     constructor() {
+        this.subscriptSizing = 'fixed';
         this.control = new FormControl(null);
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     focus() { this.input.focus(); }
     ngOnInit() {
         this.required && this.control.addValidators(Validators.required);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AddressField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AddressField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: AddressInput, descendants: true }], ngImport: i0, template: `@if (mode==='compose') {
-  <mat-form-field [appearance]=appearance>
-    <mat-label>{{label|localizedString}}</mat-label>
-    @if (hint) {
-      <mat-hint> {{ hint |localizedString}}</mat-hint>
-    }
-    <bizdoc-address [formControl]=control [placeholder]="placeholder|localizedString"></bizdoc-address>
-    @if (control.hasError('required')) {
-      <mat-error [innerHTML]="'RequiredErr'|translate:(label|localizedString)"></mat-error>
-    }
-  </mat-form-field>
-} @else {
-  {{control.value}}
-}
-`, isInline: true, dependencies: [{ 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: 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: AddressInput, selector: "bizdoc-address", inputs: ["debounce", "location", "country", "placeholder", "required", "disabled", "value"], outputs: ["optionSelected"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AddressField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: AddressInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    <bizdoc-address [formControl]=control [placeholder]=\"placeholder|localizedString\"></bizdoc-address>\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  {{control.value}}\r\n}\r\n", dependencies: [{ 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: 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: AddressInput, selector: "bizdoc-address", inputs: ["debounce", "location", "country", "placeholder", "required", "disabled", "value"], outputs: ["optionSelected"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 AddressField = __decorate([
     BizDoc({ selector: 'address-control' })
 ], AddressField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AddressField, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    template: `@if (mode==='compose') {
-  <mat-form-field [appearance]=appearance>
-    <mat-label>{{label|localizedString}}</mat-label>
-    @if (hint) {
-      <mat-hint> {{ hint |localizedString}}</mat-hint>
-    }
-    <bizdoc-address [formControl]=control [placeholder]="placeholder|localizedString"></bizdoc-address>
-    @if (control.hasError('required')) {
-      <mat-error [innerHTML]="'RequiredErr'|translate:(label|localizedString)"></mat-error>
-    }
-  </mat-form-field>
-} @else {
-  {{control.value}}
-}
-`,
-                    host: { class: 'field' }
-                }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n    }\r\n    <bizdoc-address [formControl]=control [placeholder]=\"placeholder|localizedString\"></bizdoc-address>\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  {{control.value}}\r\n}\r\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [AddressInput]
@@ -24575,7 +24579,7 @@ let ActionsWidget = class ActionsWidget {
     }
     _draw() {
         this.chart?.destroy();
-        this._loaded.pipe(takeUntil(this._destroy), filter(v => v)).subscribe(() => this.chart = new AccumulationChart({
+        this._loaded.pipe(takeUntil(this._destroy), delay(200), filter(v => v)).subscribe(() => this.chart = new AccumulationChart({
             background: 'transparent',
             legendSettings: this.legendSettings, enableAnimation: true,
             tooltip: this.tooltip,
@@ -25064,7 +25068,7 @@ let CubeDocumentsWidget = class CubeDocumentsWidget {
         this.dataSource.sort = this.sort;
     }
     open(item) {
-        this._mailbox.info(item.id).subscribe({
+        this._mailbox.getDocumentInfo(item.id).subscribe({
             next: item => {
                 this._router.navigate(['mailbox/d', item.documentId.encodeId()], {
                     state: {
@@ -26966,7 +26970,7 @@ let TasksComponent = class TasksComponent {
      */
     drag(evt) {
         const { id, stateId, userId } = evt.data[0];
-        this._mailbox.changeState(id, stateId, userId).
+        this._mailbox.setDocumentState(id, stateId, userId).
             subscribe({ error: () => this._sb.error() });
     }
     /**
@@ -28522,7 +28526,7 @@ class QuickCommentComponent {
         this._destroy = new Subject();
     }
     ngOnInit() {
-        this._textChange.pipe(debounceTime(TYPING_NOTIFY$1), takeUntil(this._destroy)).subscribe(() => this._mailbox.typing(this.model.documentId).subscribe());
+        this._textChange.pipe(debounceTime(TYPING_NOTIFY$1), takeUntil(this._destroy)).subscribe(() => this._mailbox.reportTyping(this.model.documentId).subscribe());
         this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).
             subscribe(e => {
             this._accounts.get(e.userId).subscribe(u => {
@@ -28918,7 +28922,7 @@ let TimelineViewComponent = class TimelineViewComponent {
     _prepare() {
         const observables = [], tasks = [];
         let i = 0;
-        //const observable = this._mailbox.timeline(model.documentId).pipe(tap(t => {
+        //const observable = this._mailbox.listTimeline(model.documentId).pipe(tap(t => {
         //}))
         this.model.log.forEach(l => {
             let task;
@@ -30306,7 +30310,7 @@ class BoxFormControlComponent {
         const comp = this._cf.component(selector);
         const compRef = this._vc.createComponent(comp);
         const instance = compRef.instance;
-        instance.appearance = this._config.appearance || 'outline';
+        instance.appearance = this._config.appearance || 'fill';
         instance.mode = this.mode;
         Object.assign(instance, this.metadata);
         this.model && this.model[this.metadata.name] !== undefined &&
@@ -30362,14 +30366,14 @@ let BoxFormComponent = class BoxFormComponent {
         group.addControl(field.name, instance.control);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BoxFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: FormRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BoxFormComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "@if (mode !== 'compose') {\r\n  <form>\r\n    @for (s of metadata.sections; track s) {\r\n      <section>\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row\">\r\n                @for (f of r.fields; track f) {\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @default {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row\">\r\n                @for (f of r.fields; track f) {\r\n                  <bizdoc-box-control [metadata]=\"f\"\r\n                    [mode]=\"mode\"\r\n                    [model]=\"data.model[s.name]\"\r\n                    [attr.data-field]=\"f.name\"\r\n                  [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n} @else {\r\n  @if (guide) {\r\n    <bizdoc-help-tip [name]=\"guide\"></bizdoc-help-tip>\r\n  }\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    @for (s of metadata.sections; track s) {\r\n      <section [attr.data-section]=\"s.name\">\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @if (s.note) {\r\n          <p class=\"mat-body-1\">{{s.note|localizedString}}</p>\r\n        }\r\n        <hr />\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            <ng-container [formArrayName]=\"s.name\">\r\n              <table class=\"mat-mdc-table\">\r\n                @for (r of s.rows; track r) {\r\n                  <thead class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <th class=\"mat-mdc-cell\">\r\n                        </th>\r\n                      }\r\n                    </tr>\r\n                  </thead>\r\n                }\r\n                @for (r of s.rows; track r) {\r\n                  <tbody class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <td class=\"mat-mdc-cell\">\r\n                        </td>\r\n                      }\r\n                      <td>\r\n                        <button mat-icon-button></button>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                }\r\n              </table>\r\n            </ng-container>\r\n          }\r\n          @default {\r\n            <ng-container [formGroupName]=\"s.name\">\r\n              @for (r of s.rows; track r) {\r\n                <div class=\"row box-row\">\r\n                  @for (f of r.fields; track f) {\r\n                    <bizdoc-box-control [metadata]=\"f\"\r\n                      [mode]=\"mode\"\r\n                      [model]=\"data.model[s.name]\"\r\n                      [attr.data-field]=\"f.name\"\r\n                    [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                  }\r\n                </div>\r\n              }\r\n            </ng-container>\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n}\r\n", styles: ["form{padding:8px}section{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: HelpTipComponent, selector: "bizdoc-help-tip", inputs: ["name"] }, { kind: "component", type: BoxFormControlComponent, selector: "bizdoc-box-control", inputs: ["form", "mode", "model", "metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BoxFormComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "@if (mode !== 'compose') {\r\n  <form>\r\n    @for (s of metadata.sections; track s) {\r\n      <section>\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row\">\r\n                @for (f of r.fields; track f) {\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @default {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row gap\">\r\n                @for (f of r.fields; track f) {\r\n                  <bizdoc-box-control [metadata]=\"f\"\r\n                    [mode]=\"mode\"\r\n                    [model]=\"data.model[s.name]\"\r\n                    [attr.data-field]=\"f.name\"\r\n                  [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n} @else {\r\n  @if (guide) {\r\n    <bizdoc-help-tip [name]=\"guide\"></bizdoc-help-tip>\r\n  }\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    @for (s of metadata.sections; track s) {\r\n      <section [attr.data-section]=\"s.name\">\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @if (s.note) {\r\n          <p class=\"mat-body-1\">{{s.note|localizedString}}</p>\r\n        }\r\n        <hr />\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            <ng-container [formArrayName]=\"s.name\">\r\n              <table class=\"mat-mdc-table\">\r\n                @for (r of s.rows; track r) {\r\n                  <thead class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <th class=\"mat-mdc-cell\">\r\n                        </th>\r\n                      }\r\n                    </tr>\r\n                  </thead>\r\n                }\r\n                @for (r of s.rows; track r) {\r\n                  <tbody class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <td class=\"mat-mdc-cell\">\r\n                        </td>\r\n                      }\r\n                      <td>\r\n                        <button mat-icon-button></button>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                }\r\n              </table>\r\n            </ng-container>\r\n          }\r\n          @default {\r\n            <ng-container [formGroupName]=\"s.name\">\r\n              @for (r of s.rows; track r) {\r\n                <div class=\"row gap box-row\">\r\n                  @for (f of r.fields; track f) {\r\n                    <bizdoc-box-control [metadata]=\"f\"\r\n                      [mode]=\"mode\"\r\n                      [model]=\"data.model[s.name]\"\r\n                      [attr.data-field]=\"f.name\"\r\n                    [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                  }\r\n                </div>\r\n              }\r\n            </ng-container>\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n}\r\n", styles: ["form{padding:8px}section{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: HelpTipComponent, selector: "bizdoc-help-tip", inputs: ["name"] }, { kind: "component", type: BoxFormControlComponent, selector: "bizdoc-box-control", inputs: ["form", "mode", "model", "metadata"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }] }); }
 };
 BoxFormComponent = __decorate([
     BizDoc({ selector: 'bizdoc-box-form' })
 ], BoxFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BoxFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "@if (mode !== 'compose') {\r\n  <form>\r\n    @for (s of metadata.sections; track s) {\r\n      <section>\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row\">\r\n                @for (f of r.fields; track f) {\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @default {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row\">\r\n                @for (f of r.fields; track f) {\r\n                  <bizdoc-box-control [metadata]=\"f\"\r\n                    [mode]=\"mode\"\r\n                    [model]=\"data.model[s.name]\"\r\n                    [attr.data-field]=\"f.name\"\r\n                  [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n} @else {\r\n  @if (guide) {\r\n    <bizdoc-help-tip [name]=\"guide\"></bizdoc-help-tip>\r\n  }\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    @for (s of metadata.sections; track s) {\r\n      <section [attr.data-section]=\"s.name\">\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @if (s.note) {\r\n          <p class=\"mat-body-1\">{{s.note|localizedString}}</p>\r\n        }\r\n        <hr />\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            <ng-container [formArrayName]=\"s.name\">\r\n              <table class=\"mat-mdc-table\">\r\n                @for (r of s.rows; track r) {\r\n                  <thead class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <th class=\"mat-mdc-cell\">\r\n                        </th>\r\n                      }\r\n                    </tr>\r\n                  </thead>\r\n                }\r\n                @for (r of s.rows; track r) {\r\n                  <tbody class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <td class=\"mat-mdc-cell\">\r\n                        </td>\r\n                      }\r\n                      <td>\r\n                        <button mat-icon-button></button>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                }\r\n              </table>\r\n            </ng-container>\r\n          }\r\n          @default {\r\n            <ng-container [formGroupName]=\"s.name\">\r\n              @for (r of s.rows; track r) {\r\n                <div class=\"row box-row\">\r\n                  @for (f of r.fields; track f) {\r\n                    <bizdoc-box-control [metadata]=\"f\"\r\n                      [mode]=\"mode\"\r\n                      [model]=\"data.model[s.name]\"\r\n                      [attr.data-field]=\"f.name\"\r\n                    [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                  }\r\n                </div>\r\n              }\r\n            </ng-container>\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n}\r\n", styles: ["form{padding:8px}section{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"] }]
+            args: [{ standalone: false, template: "@if (mode !== 'compose') {\r\n  <form>\r\n    @for (s of metadata.sections; track s) {\r\n      <section>\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row\">\r\n                @for (f of r.fields; track f) {\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n          @default {\r\n            @for (r of s.rows; track r) {\r\n              <div class=\"row gap\">\r\n                @for (f of r.fields; track f) {\r\n                  <bizdoc-box-control [metadata]=\"f\"\r\n                    [mode]=\"mode\"\r\n                    [model]=\"data.model[s.name]\"\r\n                    [attr.data-field]=\"f.name\"\r\n                  [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n} @else {\r\n  @if (guide) {\r\n    <bizdoc-help-tip [name]=\"guide\"></bizdoc-help-tip>\r\n  }\r\n  <form [formGroup]=\"form\" autocomplete=\"off\">\r\n    @for (s of metadata.sections; track s) {\r\n      <section [attr.data-section]=\"s.name\">\r\n        <h2 class=\"mat-h2\">{{s.title|localizedString}}</h2>\r\n        @if (s.note) {\r\n          <p class=\"mat-body-1\">{{s.note|localizedString}}</p>\r\n        }\r\n        <hr />\r\n        @switch (s.multiLine) {\r\n          @case (true) {\r\n            <ng-container [formArrayName]=\"s.name\">\r\n              <table class=\"mat-mdc-table\">\r\n                @for (r of s.rows; track r) {\r\n                  <thead class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <th class=\"mat-mdc-cell\">\r\n                        </th>\r\n                      }\r\n                    </tr>\r\n                  </thead>\r\n                }\r\n                @for (r of s.rows; track r) {\r\n                  <tbody class=\"\">\r\n                    <tr class=\"mat-mdc-row\">\r\n                      @for (f of r.fields; track f) {\r\n                        <td class=\"mat-mdc-cell\">\r\n                        </td>\r\n                      }\r\n                      <td>\r\n                        <button mat-icon-button></button>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                }\r\n              </table>\r\n            </ng-container>\r\n          }\r\n          @default {\r\n            <ng-container [formGroupName]=\"s.name\">\r\n              @for (r of s.rows; track r) {\r\n                <div class=\"row gap box-row\">\r\n                  @for (f of r.fields; track f) {\r\n                    <bizdoc-box-control [metadata]=\"f\"\r\n                      [mode]=\"mode\"\r\n                      [model]=\"data.model[s.name]\"\r\n                      [attr.data-field]=\"f.name\"\r\n                    [form]=\"form.get(s.name)\"></bizdoc-box-control>\r\n                  }\r\n                </div>\r\n              }\r\n            </ng-container>\r\n          }\r\n        }\r\n      </section>\r\n    }\r\n  </form>\r\n}\r\n", styles: ["form{padding:8px}section{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}section .box-row{padding:4px}::ng-deep field{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: FormRef }] });
 
 let PerformanceWindComponent = class PerformanceWindComponent {
@@ -30738,9 +30742,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 let TimeField = class TimeField {
     constructor() {
+        this.subscriptSizing = 'fixed';
         this.isMobile = isMobile();
         this.control = new FormControl();
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     focus() { this.input.focus(); }
     ngOnInit() {
         this.required && this.control.addValidators(Validators.required);
@@ -30748,14 +30757,14 @@ let TimeField = class TimeField {
         this.max && this.control.addValidators(Validators.max(this.max));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TimeField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TimeField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <mat-time-picker [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n      [required]=\"required\">\r\n    </mat-time-picker>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>{{control.value | amDateFormat: 'll'}}</span>\r\n  }\r\n}\r\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: 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: TimePicker, selector: "mat-time-picker", inputs: ["dateControlName", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TimeField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <mat-time-picker [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n      [required]=\"required\">\r\n    </mat-time-picker>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>{{control.value | amDateFormat: 'll'}}</span>\r\n  }\r\n}\r\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: 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: TimePicker, selector: "mat-time-picker", inputs: ["dateControlName", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TimeField = __decorate([
     BizDoc({ selector: 'time-control' })
 ], TimeField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TimeField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance>\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <mat-time-picker [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n      [required]=\"required\">\r\n    </mat-time-picker>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>{{control.value | amDateFormat: 'll'}}</span>\r\n  }\r\n}\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label|localizedString}}</mat-label>\r\n    <mat-time-picker [placeholder]=\"placeholder|localizedString\" [formControl]=control\r\n      [required]=\"required\">\r\n    </mat-time-picker>\r\n    @if (hint) {\r\n      <mat-hint> {{ hint|localizedString }}</mat-hint>\r\n    }\r\n    @if (control.hasError('required')) {\r\n      <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n} @else {\r\n  @if (control.value) {\r\n    <span>{{control.value | amDateFormat: 'll'}}</span>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput]
@@ -30764,8 +30773,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 let ChipsField = class ChipsField {
     constructor() {
         this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
+        this.subscriptSizing = 'fixed';
         this.control = new FormControl();
     }
+    set dense(val) {
+        if (val)
+            this.subscriptSizing = 'dynamic';
+    }
     ngOnInit() {
         this.required && this.control.addValidators(Validators.required);
     }
@@ -30785,14 +30799,14 @@ let ChipsField = class ChipsField {
         this.control.setValue(this.tags.length ? this.tags : null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChipsField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ChipsField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance class=\"flex\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-chip-grid #chips\r\n      [formControl]=\"control\"\r\n      [attr.aria-label]=\"label\">\r\n      @for (t of (control.value || []); track t) {\r\n        <mat-chip-row\r\n          removable (removed)=\"removeTag(t)\">\r\n          {{t}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n      }\r\n      <input [matChipInputFor]=\"chips\"\r\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n        [matChipInputAddOnBlur]=\"true\"\r\n        (matChipInputTokenEnd)=\"addTag($event)\">\r\n      </mat-chip-grid>\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @if (control.value) {\r\n      <mat-chip-set>\r\n        @for (t of control.value; track t) {\r\n          <mat-chip>{{t}}</mat-chip>\r\n        }\r\n      </mat-chip-set>\r\n    }\r\n  }\r\n", dependencies: [{ 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"], 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", "readonly", "matChipInputDisabledInteractive"], 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: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ChipsField, isStandalone: false, selector: "ng-component", host: { classAttribute: "field" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], ngImport: i0, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance  [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-chip-grid #chips\r\n      [formControl]=\"control\"\r\n      [attr.aria-label]=\"label\">\r\n      @for (t of (control.value || []); track t) {\r\n        <mat-chip-row\r\n          removable (removed)=\"removeTag(t)\">\r\n          {{t}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n      }\r\n      <input [matChipInputFor]=\"chips\"\r\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n        [matChipInputAddOnBlur]=\"true\"\r\n        (matChipInputTokenEnd)=\"addTag($event)\">\r\n      </mat-chip-grid>\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @if (control.value) {\r\n      <mat-chip-set>\r\n        @for (t of control.value; track t) {\r\n          <mat-chip>{{t}}</mat-chip>\r\n        }\r\n      </mat-chip-set>\r\n    }\r\n  }\r\n", dependencies: [{ 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"], 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", "readonly", "matChipInputDisabledInteractive"], 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: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ChipsField = __decorate([
     BizDoc({ selector: 'tags-control' })
 ], ChipsField);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChipsField, decorators: [{
             type: Component,
-            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance class=\"flex\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-chip-grid #chips\r\n      [formControl]=\"control\"\r\n      [attr.aria-label]=\"label\">\r\n      @for (t of (control.value || []); track t) {\r\n        <mat-chip-row\r\n          removable (removed)=\"removeTag(t)\">\r\n          {{t}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n      }\r\n      <input [matChipInputFor]=\"chips\"\r\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n        [matChipInputAddOnBlur]=\"true\"\r\n        (matChipInputTokenEnd)=\"addTag($event)\">\r\n      </mat-chip-grid>\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @if (control.value) {\r\n      <mat-chip-set>\r\n        @for (t of control.value; track t) {\r\n          <mat-chip>{{t}}</mat-chip>\r\n        }\r\n      </mat-chip-set>\r\n    }\r\n  }\r\n" }]
+            args: [{ standalone: false, host: { class: 'field' }, template: "@if (mode==='compose') {\r\n  <mat-form-field [appearance]=appearance  [subscriptSizing]=\"subscriptSizing\">\r\n    <mat-label>{{label |localizedString}}</mat-label>\r\n    <mat-chip-grid #chips\r\n      [formControl]=\"control\"\r\n      [attr.aria-label]=\"label\">\r\n      @for (t of (control.value || []); track t) {\r\n        <mat-chip-row\r\n          removable (removed)=\"removeTag(t)\">\r\n          {{t}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n      }\r\n      <input [matChipInputFor]=\"chips\"\r\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n        [matChipInputAddOnBlur]=\"true\"\r\n        (matChipInputTokenEnd)=\"addTag($event)\">\r\n      </mat-chip-grid>\r\n      @if (control.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:(label|localizedString)\"></mat-error>\r\n      }\r\n      @if (hint) {\r\n        <mat-hint> {{ hint |localizedString}}</mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    @if (control.value) {\r\n      <mat-chip-set>\r\n        @for (t of control.value; track t) {\r\n          <mat-chip>{{t}}</mat-chip>\r\n        }\r\n      </mat-chip-set>\r\n    }\r\n  }\r\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput]
@@ -33950,11 +33964,11 @@ class ProfileSettingsDialog {
         this.form.patchValue({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProfileSettingsDialog, deps: [{ token: AccountService }, { token: i2$2.MatDialogRef }, { token: i1$2.FormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ProfileSettingsDialog, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n          [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n            (optionSelected)=\"setId($event)\">\r\n            @for (u of ousers$ | async; track u) {\r\n              <mat-option [value]=\"u\">\r\n                <span>{{u.name}}</span>\r\n              </mat-option>\r\n            }\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Dates'|translate}}</mat-label>\r\n          <mat-date-range-input [formGroup]=\"form\" [rangePicker]=\"dates\" required>\r\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n          </mat-date-range-input>\r\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n      </div>\r\n      <!--<hr />-->\r\n      <div class=\"column\" formGroupName=\"grantAccess\">\r\n        <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n            @for (u of grantAccess.value.users || []; track u) {\r\n              <mat-chip-row\r\n                [removable]=\"grantAccess.value.active\"\r\n                (removed)=\"removeGrant(u)\">\r\n                {{u | userName | async}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n            }\r\n          </mat-chip-grid>\r\n          <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n            [required]=\"grantAccess.value.active\"\r\n            [matAutocomplete]=\"grantAuto\"\r\n            #grantInput\r\n            [matChipInputFor]=\"grantList\"\r\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n              @for (u of gusers$ | async; track u) {\r\n                <mat-option [value]=\"u.id\">\r\n                  {{u.name}}\r\n                  @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                  }\r\n                </mat-option>\r\n              }\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n      </form>\r\n    </mat-dialog-content>\r\n    <mat-dialog-actions>\r\n      <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n      <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n    </mat-dialog-actions>\r\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: "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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], 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$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: i2$6.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$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ProfileSettingsDialog, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          @for (u of ousers$ | async; track u) {\r\n          <mat-option [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required>\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      </mat-form-field>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field>\r\n        <mat-label>{{'Associates'|translate}}</mat-label>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          @for (u of grantAccess.value.users || []; track u) {\r\n          <mat-chip-row [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n          }\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          @for (u of gusers$ | async; track u) {\r\n          <mat-option [value]=\"u.id\">\r\n            {{u.name}}\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\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: "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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], 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$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: i2$6.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$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProfileSettingsDialog, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n          [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n            (optionSelected)=\"setId($event)\">\r\n            @for (u of ousers$ | async; track u) {\r\n              <mat-option [value]=\"u\">\r\n                <span>{{u.name}}</span>\r\n              </mat-option>\r\n            }\r\n          </mat-autocomplete>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Dates'|translate}}</mat-label>\r\n          <mat-date-range-input [formGroup]=\"form\" [rangePicker]=\"dates\" required>\r\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n          </mat-date-range-input>\r\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n      </div>\r\n      <!--<hr />-->\r\n      <div class=\"column\" formGroupName=\"grantAccess\">\r\n        <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n            @for (u of grantAccess.value.users || []; track u) {\r\n              <mat-chip-row\r\n                [removable]=\"grantAccess.value.active\"\r\n                (removed)=\"removeGrant(u)\">\r\n                {{u | userName | async}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n            }\r\n          </mat-chip-grid>\r\n          <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n            [required]=\"grantAccess.value.active\"\r\n            [matAutocomplete]=\"grantAuto\"\r\n            #grantInput\r\n            [matChipInputFor]=\"grantList\"\r\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n              @for (u of gusers$ | async; track u) {\r\n                <mat-option [value]=\"u.id\">\r\n                  {{u.name}}\r\n                  @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                  }\r\n                </mat-option>\r\n              }\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n      </form>\r\n    </mat-dialog-content>\r\n    <mat-dialog-actions>\r\n      <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n      <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n    </mat-dialog-actions>\r\n" }]
+            args: [{ standalone: false, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          @for (u of ousers$ | async; track u) {\r\n          <mat-option [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required>\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      </mat-form-field>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field>\r\n        <mat-label>{{'Associates'|translate}}</mat-label>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          @for (u of grantAccess.value.users || []; track u) {\r\n          <mat-chip-row [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n          }\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          @for (u of gusers$ | async; track u) {\r\n          <mat-option [value]=\"u.id\">\r\n            {{u.name}}\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$2.MatDialogRef }, { type: i1$2.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]