@bizdoc/core 3.7.0 → 3.7.2

package/fesm2022/bizdoc-core.mjs

@@ -514,8 +514,10 @@ function cleanup(params) {
         const val = params[k];
         if (val === null || val === undefined)
             delete params[k];
-        else if (typeof val === 'string' || val instanceof Date || typeof val === 'boolean')
+        else if (typeof val === 'string' || typeof val === 'boolean')
             return;
+        else if (val instanceof Date)
+            params[k] = val.toLocaleDateString('en-US');
         else if (Array.isArray(val)) {
             if (val.length === 0)
                 delete params[k];
@@ -1652,6 +1654,7 @@ const STRINGS = {
     'ar': {},
     'ru': {},
     'en': {
+        Keyboard: 'Keyboard',
         Insights: 'Insights',
         AltSHelp: 'Find in folders / global search',
         CtrlSHelp: 'Save in editing / tool mode',
@@ -1707,7 +1710,6 @@ const STRINGS = {
         Check: 'Check',
         EverybodyRange: 'Everyone',
         YourRange: 'You',
-        Introduction: 'Introduction',
         AssignTo: 'Forward to',
         AssignRoundtrip: 'Return to me',
         FYI: 'FYI',
@@ -1741,7 +1743,7 @@ const STRINGS = {
         Elipsis: '{0}...',
         Note: 'Note',
         ShowAll: 'Show All',
-        OutOfOfficeOn: 'You are set as <i>out of office</i>. Your messages are forwarded to <em>{0}</em>',
+        OutOfOfficeOn: 'You are set as out of office. Your messages are being forwarded to {0}',
         Dismiss: 'Dismiss',
         ChangeOptions: 'Options',
         Impersonating: 'You logged in on behalf of {0}',
@@ -2028,13 +2030,7 @@ const STRINGS = {
         Positions: 'Positions',
         Actions: 'Actions',
         Exit: 'Exit',
-        DashboardHelp: 'Review data from app.',
         Mailbox: 'Mailbox',
-        MailboxHelp: 'Watch mail in folders.',
-        ComposeHelp: 'Create a new application by selecting a form, <br/>fill form and submit.',
-        NotificationsHelp: 'Watch notifications from activities.<br/>You can decide which activities you wish to be informed of in options.',
-        CubeHelp: 'Inspect aggregated summary of values from all forms.<br/>Drill-down into numbers to browse responsibe forms.',
-        ChatHelp: 'Communicate with other users privately',
         ShowAs: 'Show as: {0}',
         Unauthorized: 'Unauthorized access',
         NotAcceptable: 'Unauthorized access',
@@ -2075,6 +2071,7 @@ const STRINGS = {
         MaxLengthErr: 'Maximum <strong>{0}</strong> length',
     },
     'he': {
+        Keyboard: 'קיצורי דרך',
         SettingThingsUp: 'אוסף נתונים',
         PleaseWait: 'אנא המתן/י',
         Enable: 'אפשר/י',
@@ -2193,23 +2190,8 @@ const STRINGS = {
         Add: 'הוסף/י',
         Check: 'בחר/י',
         Help: 'עזרה',
-        Introduction: 'היכרות',
         Changed: 'שונה',
-        CubeHelp: 'צפה/י בסיכומים חשבונאיים טבלאיים וע"ג גראפים',
-        ChatHelp: 'נהל/י שיחה עם משתמשים אחרים',
-        ChatHelpMale: 'נהל שיחה עם משתמשים אחרים',
-        ChatHelpFemale: 'נהלי שיחה עם משתמשים אחרים',
-        ComposeHelp: 'התחל/י בקשה חדשה',
-        ComposeHelpMale: 'התחל בקשה חדשה',
-        ComposeHelpFemale: 'התחלי בקשה חדשה',
-        NotificationsHelp: 'כאן יופיעו התראות מהמערכת.',
-        DashboardHelp: 'כאן את/ה יכול/ה לסקור נתונים מכל המערכת',
-        DashboardHelpMale: 'כאן אתה יכול לסקור נתונים מכל המערכת',
-        DashboardHelpFemale: 'כאן את יכולה לסקור נתונים מכל המערכת',
         Mailbox: 'דואר',
-        MailboxHelp: 'צפה/י בדואר בתקיות. מסמכים חדשים יופיעו תחת \'דואר נכנס\'',
-        MailboxHelpMale: 'צפה בדואר בתקיות. מסמכים חדשים יופיעו תחת \'דואר נכנס\'',
-        MailboxHelpFemale: 'צפי בדואר בתקיות. מסמכים חדשים יופיעו תחת \'דואר נכנס\'',
         StartTour: 'התחל/י מדריך',
         StartTourMale: 'התחל מדריך',
         StartTourFemale: 'התחלי מדריך',
@@ -3181,6 +3163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             }] } });
 
 class GuideRef {
+    get guide() { return this._guide; }
     constructor(_guide, _overlayRef) {
         this._guide = _guide;
         this._overlayRef = _overlayRef;
@@ -3191,51 +3174,11 @@ class GuideRef {
 }
 /** */
 class GuideService {
-    constructor(_overlay, _injector, _session, _translate, _config) {
+    constructor(_overlay, _injector, _session) {
         this._overlay = _overlay;
         this._injector = _injector;
         this._session = _session;
-        this._translate = _translate;
-        this._config = _config;
-        let guides = [this._intro()];
-        if (this._session.profile.guides)
-            guides = guides.concat(this._session.profile.guides);
-        this._guides = guides;
-    }
-    /** */
-    _intro() {
-        const mobile = isMobile();
-        const steps = [
-            { selector: '[data-help=compose]', content: this._translate.get('ComposeHelp'), position: 'End', title: this._translate.get('Compose') }
-        ];
-        steps.push({ navigate: 'dashboard', selector: '[data-help=dashboard]', content: this._translate.get('DashboardHelp'), title: this._translate.get('Dashboard') });
-        steps.push({
-            navigate: 'mailbox/f/ib',
-            selector: '[data-help=folders]',
-            execute: !mobile,
-            content: this._translate.get('MailboxHelp'),
-            title: this._translate.get('Mailbox')
-        });
-        if (!this._config || this._config.chat !== false)
-            steps.push({
-                selector: '[data-help=chat]', content: this._translate.get('ChatHelp'),
-                execute: !mobile,
-                position: 'Start', title: this._translate.get('Chat')
-            });
-        if (this._session.profile.cubes.length && this._session.profile.cubes[0].views && this._session.profile.cubes[0].views.length) {
-            let path = `cube/${this._session.profile.cubes[0].name}/v/${this._session.profile.cubes[0].views[0].name}`;
-            steps.push({
-                execute: !mobile,
-                navigate: path, selector: '[data-help=cube]',
-                content: this._translate.get('CubeHelp'), title: this._translate.get('Cube')
-            });
-        }
-        steps.push({ selector: '[data-help=notifications]', content: this._translate.get('NotificationsHelp'), title: this._translate.get('Notifications') });
-        return {
-            name: 'intro',
-            title: this._translate.get('Introduction'),
-            steps
-        };
+        this._guides = this._session.profile.guides || [];
     }
     get guides() {
         return this._guides;
@@ -3283,16 +3226,13 @@ class GuideService {
         !this.seen(guide.name) && this._session.markGuideAsRead(guide.name).subscribe();
         return gRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: GuideService, deps: [{ token: i2$3.Overlay }, { token: i0.Injector }, { token: SessionService }, { token: TranslateService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: GuideService, deps: [{ token: i2$3.Overlay }, { token: i0.Injector }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: GuideService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: GuideService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2$3.Overlay }, { type: i0.Injector }, { type: SessionService }, { type: TranslateService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BIZDOC_CONFIG]
-                }] }] });
+        }], ctorParameters: () => [{ type: i2$3.Overlay }, { type: i0.Injector }, { type: SessionService }] });
 
 class AccountService {
     constructor(_http, messaging) {
@@ -3985,10 +3925,11 @@ class OptionsComponent {
     }
     _toggle(group, active, ...controls) {
         controls.forEach(name => {
+            const ctrl = group.controls[name];
             if (!active)
-                group.controls[name].disable({ emitEvent: false });
+                ctrl.disable({ emitEvent: false });
             else
-                group.controls[name].enable({ emitEvent: false });
+                ctrl.enable({ emitEvent: false });
         });
     }
     toggleSound() {
@@ -4044,11 +3985,11 @@ class OptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: OptionsComponent, deps: [{ token: PromptService }, { token: GuideService }, { token: HubService }, { token: i2$2.MatDialog }, { token: i1$2.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: PaneRef, optional: true }, { token: SessionService }, { token: Popup }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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<!--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  @if (guides.length) {\r\n  <button mat-button [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\" [matMenuTriggerFor]=\"guidesMenu\">\r\n    {{'Help'|translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #guidesMenu>\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</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<!--guide-->\r\n<ng-template #guidesTmpl>\r\n  <mat-nav-list role=\"list\">\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-nav-list>\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: "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.1.0", 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  <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"] }]
+            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<!--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  @if (guides.length) {\r\n  <button mat-button [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\" [matMenuTriggerFor]=\"guidesMenu\">\r\n    {{'Help'|translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #guidesMenu>\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</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<!--guide-->\r\n<ng-template #guidesTmpl>\r\n  <mat-nav-list role=\"list\">\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-nav-list>\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: PaneRef, decorators: [{
                     type: Optional
                 }] }, { type: SessionService }, { type: Popup }, { type: undefined, decorators: [{
@@ -8117,10 +8058,12 @@ class BrowseFilterComponent {
         this.sendername = this._fb.control(null);
         this.form = this._fb.group({
             contains: this._fb.control(null),
-            form: this._fb.control(null),
-            state: this._fb.control(null),
+            formId: this._fb.control(null),
+            stateId: this._fb.control(null),
             senderId: this._fb.control(null),
-            tag: this._fb.control(null)
+            tags: this._fb.control(null),
+            fromDate: this._fb.control(null),
+            toDate: this._fb.control(null)
         });
         this.sources = {};
         this._destroy = new Subject();
@@ -8146,7 +8089,7 @@ class BrowseFilterComponent {
         if (this.values.senderId)
             this._accounts.get(this.values.senderId).
                 subscribe(u => this.sendername.setValue(u, { emitEvent: false }));
-        this.chips.value = this.values.tag;
+        this.chips.value = this.values.tags;
     }
     ngAfterViewInit() {
         this.focus();
@@ -8167,8 +8110,8 @@ class BrowseFilterComponent {
         this.valuesChange.emit(value);
     }
     toggleTag(evt) {
-        const tag = evt.value?.name;
-        this.form.controls.tag.setValue(this.form.controls.tag.value !== tag ? tag : null);
+        //const tag = (evt.value as Tag)?.name;
+        //this.form.controls.tags.setValue(this.form.controls.tags.value !== tag ? tag : null);
     }
     displayFn(item) {
         return item ? item.name : undefined;
@@ -8192,11 +8135,11 @@ class BrowseFilterComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BrowseFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: MailboxService }, { token: AccountService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: BrowseFilterComponent, isStandalone: false, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "containsEl", first: true, predicate: ["contains"], descendants: true, read: ElementRef, static: true }, { propertyName: "senderEl", first: true, predicate: ["sender"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | 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    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" (change)=\"toggleTag($event)\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\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.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: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes", "autofocus"], outputs: ["axesChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: BrowseFilterComponent, isStandalone: false, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "containsEl", first: true, predicate: ["contains"], descendants: true, read: ElementRef, static: true }, { propertyName: "senderEl", first: true, predicate: ["sender"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u.id) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"stateId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s.name) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"formId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f.name) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-label>{{'Received' | translate}}</mat-label>\r\n    <mat-date-range-input  [rangePicker]=\"datePicker\" [formGroup]=\"form\">\r\n      <input matStartDate [placeholder]=\"'StartDate'| translate\" formControlName=\"fromDate\">\r\n      <input matEndDate [placeholder]=\"'EndDate' | translate\" formControlName=\"toDate\">\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #datePicker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" [multiple]=true formControlName=\"tags\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag.name\" [highlighted]=false>\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\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.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: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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: 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$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: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes", "autofocus"], outputs: ["axesChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BrowseFilterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | 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    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" (change)=\"toggleTag($event)\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u.id) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"stateId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s.name) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"formId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f.name) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-label>{{'Received' | translate}}</mat-label>\r\n    <mat-date-range-input  [rangePicker]=\"datePicker\" [formGroup]=\"form\">\r\n      <input matStartDate [placeholder]=\"'StartDate'| translate\" formControlName=\"fromDate\">\r\n      <input matEndDate [placeholder]=\"'EndDate' | translate\" formControlName=\"toDate\">\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #datePicker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" [multiple]=true formControlName=\"tags\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag.name\" [highlighted]=false>\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SessionService }, { type: i0.ChangeDetectorRef }, { type: MailboxService }, { type: AccountService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -9244,18 +9187,18 @@ class ExpandedItemComponent {
         this._typingTask && clearTimeout(this._typingTask);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExpandedItemComponent, deps: [{ token: PromptService }, { token: ChatInfo }, { token: AccountService }, { token: MailboxService }, { token: SessionService }, { token: i7$2.Directionality }, { token: i2$2.MatDialog }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ExpandedItemComponent, isStandalone: false, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "@if (model.summary) {\r\n<div class=\"summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n  @if (a.icon) {\r\n  <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n    <mat-icon>{{a.icon}}</mat-icon>\r\n  </button>\r\n  }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n    <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n    <div class=\"mat-small\">\r\n      @if (!newComments) {\r\n      <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n      } @else {\r\n      <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"], dependencies: [{ 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: "directive", type: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { kind: "component", type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { 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: StatePipe, name: "state" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ExpandedItemComponent, isStandalone: false, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "@if (model.summary) {\r\n<div class=\"summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n  @if (a.icon) {\r\n  <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n    <mat-icon>{{a.icon}}</mat-icon>\r\n  </button>\r\n  }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amDateFormat: 'lll'\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n    <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n    <div class=\"mat-small\">\r\n      @if (!newComments) {\r\n      <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n      } @else {\r\n      <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"], dependencies: [{ 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: "directive", type: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { kind: "component", type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: StatePipe, name: "state" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExpandedItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-expanded-item', template: "@if (model.summary) {\r\n<div class=\"summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n  @if (a.icon) {\r\n  <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n    <mat-icon>{{a.icon}}</mat-icon>\r\n  </button>\r\n  }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n    <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n    <div class=\"mat-small\">\r\n      @if (!newComments) {\r\n      <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n      } @else {\r\n      <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-expanded-item', template: "@if (model.summary) {\r\n<div class=\"summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n  @if (a.icon) {\r\n  <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n    <mat-icon>{{a.icon}}</mat-icon>\r\n  </button>\r\n  }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amDateFormat: 'lll'\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n    <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n    <div class=\"mat-small\">\r\n      @if (!newComments) {\r\n      <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n      } @else {\r\n      <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: ChatInfo }, { type: AccountService }, { type: MailboxService }, { type: SessionService }, { type: i7$2.Directionality }, { type: i2$2.MatDialog }, { type: TranslateService }, { type: HubService }], propDecorators: { model: [{
                 type: Input
             }], sent: [{
                 type: Output
             }] } });
 
-const TAKE = 200, SIZE = 20, HEADER_COLUMN_NAMES = ['number', 'subject', 'value', 'owner', 'sender', 'received', 'receivedAgo', 'replied', 'state', 'issued', 'issuedAgo'];
+const TAKE = 200, SIZE = 20, HEADER_COLUMN_NAMES = ['number', 'subject', 'value', 'owner', 'sender', 'received', 'receivedAgo', 'replied', 'repliedAgo', 'state', 'issued', 'issuedAgo'];
 /** browse items component*/
 class BrowseItemsComponent {
     /** browse ctor */
@@ -9273,10 +9216,10 @@ class BrowseItemsComponent {
         this.onopen = new EventEmitter();
         this.onInsights = new EventEmitter();
         this.CALENDAR_SPEC = {
-            lastDay: this._translate.get('Yesterday'),
-            lastWeek: 'dddd',
-            sameDay: this._translate.get('Today'),
-            sameElse: 'MMM D, yy'
+            lastWeek: 'dddd HH:mm',
+            lastDay: this._translate.get('YesterdayAt', 'HH:mm'),
+            sameDay: this._translate.get('TodayAt', 'HH:mm'),
+            sameElse: 'MMM D, YYYY'
         };
         this.sharedActions = [];
         this.dragDisabled = true;
@@ -9681,7 +9624,7 @@ class BrowseItemsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BrowseItemsComponent, deps: [{ token: MailboxService }, { token: AccountService }, { token: CubeService }, { token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }, { token: RouterImpl }, { token: HubService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: BrowseItemsComponent, isStandalone: false, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onInsights: "insights" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$8.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$8.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: 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: "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: "component", type: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: BrowseItemsComponent, isStandalone: false, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onInsights: "insights" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"repliedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.replied | amDateFormat: 'lll'\"> {{item.replied | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$8.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$8.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: 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: "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: "component", type: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             listAnimation,
             itemAnimation,
             expandListItemAnimation,
@@ -9695,7 +9638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                         itemAnimation,
                         expandListItemAnimation,
                         listItemUpdatedAnimation
-                    ], template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
+                    ], template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"repliedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.replied | amDateFormat: 'lll'\"> {{item.replied | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: MailboxService }, { type: AccountService }, { type: CubeService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }, { type: RouterImpl }, { type: HubService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -10323,13 +10266,13 @@ class ComposeFormComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ComposeFormComponent, deps: [{ token: Popup }, { token: MailboxService }, { token: AccountService }, { token: RouterImpl }, { token: i2$2.MatDialog }, { token: PromptService }, { token: SessionService }, { token: i0.Injector }, { token: i3.MatSnackBar }, { token: BizDocComponentFactoryResolver }, { token: GuideService }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ComposeFormComponent, isStandalone: false, selector: "bizdoc-form", inputs: { model: "model", working: "working", dirty: "dirty", valid: "valid", page: "page", mode: "mode", contacts: "contacts" }, outputs: { modelChange: "modelChange", workingChange: "workingChange", dirtyChange: "dirtyChange", validChange: "validChange", saved: "saved" }, host: { classAttribute: "form-container bizdoc-compose" }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "attachments", first: true, predicate: AttachmentsComponent, descendants: true, static: true }, { propertyName: "_container", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header\">\r\n    <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n    <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n    @if (!model.replied && mode !== 'compose' && model.note) {\r\n    <div class=\"compose-note\">\r\n        <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n    </div>\r\n    }\r\n    @if (tags) {\r\n    <mat-chip-set>\r\n        @for (tag of tags; track tag.name) {\r\n        <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n            @if(tag.icon) {\r\n            <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n            }\r\n            <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n        </mat-chip>\r\n        }\r\n    </mat-chip-set>\r\n    }\r\n    @if (editing) {\r\n    <div class=\"message\">{{ editing }}</div>\r\n    }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\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: "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: "directive", type: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ComposeFormComponent, isStandalone: false, selector: "bizdoc-form", inputs: { model: "model", working: "working", dirty: "dirty", valid: "valid", page: "page", mode: "mode", contacts: "contacts" }, outputs: { modelChange: "modelChange", workingChange: "workingChange", dirtyChange: "dirtyChange", validChange: "validChange", saved: "saved" }, host: { classAttribute: "form-container bizdoc-compose" }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "attachments", first: true, predicate: AttachmentsComponent, descendants: true, static: true }, { propertyName: "_container", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header\">\r\n  <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n  <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n  @if (!model.replied && mode !== 'compose' && model.note) {\r\n  <div class=\"compose-note\">\r\n    <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n    @if(model.noteBy) {\r\n    <span class=\"mat-body-2\">&mdash;&nbsp;<bizdoc-identity-name [identity]=\"model.noteBy\"></bizdoc-identity-name></span>\r\n    }\r\n  </div>\r\n  }\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n  @if (editing) {\r\n  <div class=\"message\">{{ editing }}</div>\r\n  }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\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: "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: "directive", type: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: "component", type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ComposeFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'bizdoc-form', host: {
                         class: 'form-container bizdoc-compose'
-                    }, template: "<div class=\"form-header\">\r\n    <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n    <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n    @if (!model.replied && mode !== 'compose' && model.note) {\r\n    <div class=\"compose-note\">\r\n        <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n    </div>\r\n    }\r\n    @if (tags) {\r\n    <mat-chip-set>\r\n        @for (tag of tags; track tag.name) {\r\n        <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n            @if(tag.icon) {\r\n            <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n            }\r\n            <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n        </mat-chip>\r\n        }\r\n    </mat-chip-set>\r\n    }\r\n    @if (editing) {\r\n    <div class=\"message\">{{ editing }}</div>\r\n    }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\n" }]
+                    }, template: "<div class=\"form-header\">\r\n  <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n  <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n  @if (!model.replied && mode !== 'compose' && model.note) {\r\n  <div class=\"compose-note\">\r\n    <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n    @if(model.noteBy) {\r\n    <span class=\"mat-body-2\">&mdash;&nbsp;<bizdoc-identity-name [identity]=\"model.noteBy\"></bizdoc-identity-name></span>\r\n    }\r\n  </div>\r\n  }\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n  @if (editing) {\r\n  <div class=\"message\">{{ editing }}</div>\r\n  }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\n" }]
         }], ctorParameters: () => [{ type: Popup }, { type: MailboxService }, { type: AccountService }, { type: RouterImpl }, { type: i2$2.MatDialog }, { type: PromptService }, { type: SessionService }, { type: i0.Injector }, { type: i3.MatSnackBar }, { type: BizDocComponentFactoryResolver }, { type: GuideService }, { type: TranslateService }, { type: HubService }], propDecorators: { model: [{
                 type: Input
             }], modelChange: [{
@@ -10591,6 +10534,10 @@ class BrowsePaneComponent {
         this.contains.valueChanges.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(v => this.filters = { ...this.filters, contains: v });
     }
     get folder() { return this._session.profile.folders.find(f => f.name === this.folderId); }
+    get hasFilters() {
+        const filters = this.filters;
+        return Object.keys(filters).filter(k => filters[k] != null && filters[k] !== undefined).length > 0;
+    }
     openFilter(evt) {
         //this.filterElement.nativeElement.scrollIntoView({ behavior: 'smooth' });
         this._popup.open(BrowseFilterComponent, this.filterEl.nativeElement, { position: 'end' }).
@@ -10673,11 +10620,11 @@ class BrowsePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BrowsePaneComponent, deps: [{ token: PaneRef }, { token: SessionService }, { token: Popup }, { token: PanesRouter }, { token: i7$2.Directionality }, { token: TranslateService }, { token: i7$6.BreakpointObserver }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: BrowsePaneComponent, isStandalone: false, selector: "bizdoc-browse-pane", host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "search", first: true, predicate: ["searchEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (!items.selection.isEmpty()) {\r\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n  @if (items.isAllDraft()) {\r\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n  }\r\n  @if (items.sharedActions.length === 1) {\r\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\r\n    @if (items.sharedActions[0].icon) {\r\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\r\n    }{{'SendSelected' | translate : items.selection.selected.length}}\r\n  </button>\r\n  }\r\n  @else if (items.sharedActions.length > 1) {\r\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n    {{'SendSelected'| translate : items.selection.selected.length }}\r\n  </button>\r\n  <mat-menu #action>\r\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\r\n    <mat-divider>\r\n    </mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n      {{ a.title }}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  }\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  } @else {\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\r\n         class=\"mat-body search-box\"\r\n         #searchEl\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  @if (contains.value) {\r\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (insights)=\"insights($event) \" #items></bizdoc-browse-items>\r\n", styles: [":host{min-width:560px}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatButton, selector: "    button[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: "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: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "insights"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [searchAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: BrowsePaneComponent, isStandalone: false, selector: "bizdoc-browse-pane", host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "search", first: true, predicate: ["searchEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (!items.selection.isEmpty()) {\r\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n  @if (items.isAllDraft()) {\r\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n  }\r\n  @if (items.sharedActions.length === 1) {\r\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\r\n    @if (items.sharedActions[0].icon) {\r\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\r\n    }{{'SendSelected' | translate : items.selection.selected.length}}\r\n  </button>\r\n  }\r\n  @else if (items.sharedActions.length > 1) {\r\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n    {{'SendSelected'| translate : items.selection.selected.length }}\r\n  </button>\r\n  <mat-menu #action>\r\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\r\n    <mat-divider>\r\n    </mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n      {{ a.title }}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  }\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  } @else {\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\r\n         class=\"mat-body search-box\"\r\n         #searchEl\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  @if (contains.value) {\r\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     [class.filled]=\"hasFilters\"\r\n                     (open)=\"open($event)\" (insights)=\"insights($event) \" #items></bizdoc-browse-items>\r\n", styles: [":host{min-width:560px}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatButton, selector: "    button[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: "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: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "insights"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [searchAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BrowsePaneComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-browse-pane', animations: [searchAnimation], template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (!items.selection.isEmpty()) {\r\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n  @if (items.isAllDraft()) {\r\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n  }\r\n  @if (items.sharedActions.length === 1) {\r\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\r\n    @if (items.sharedActions[0].icon) {\r\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\r\n    }{{'SendSelected' | translate : items.selection.selected.length}}\r\n  </button>\r\n  }\r\n  @else if (items.sharedActions.length > 1) {\r\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n    {{'SendSelected'| translate : items.selection.selected.length }}\r\n  </button>\r\n  <mat-menu #action>\r\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\r\n    <mat-divider>\r\n    </mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n      {{ a.title }}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  }\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  } @else {\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\r\n         class=\"mat-body search-box\"\r\n         #searchEl\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  @if (contains.value) {\r\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (insights)=\"insights($event) \" #items></bizdoc-browse-items>\r\n", styles: [":host{min-width:560px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-browse-pane', animations: [searchAnimation], template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (!items.selection.isEmpty()) {\r\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n  @if (items.isAllDraft()) {\r\n  <button mat-icon-button (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n  }\r\n  @if (items.sharedActions.length === 1) {\r\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\r\n    @if (items.sharedActions[0].icon) {\r\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\r\n    }{{'SendSelected' | translate : items.selection.selected.length}}\r\n  </button>\r\n  }\r\n  @else if (items.sharedActions.length > 1) {\r\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n    {{'SendSelected'| translate : items.selection.selected.length }}\r\n  </button>\r\n  <mat-menu #action>\r\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\r\n    <mat-divider>\r\n    </mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n      {{ a.title }}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  }\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  } @else {\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\r\n         class=\"mat-body search-box\"\r\n         #searchEl\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  @if (contains.value) {\r\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     [class.filled]=\"hasFilters\"\r\n                     (open)=\"open($event)\" (insights)=\"insights($event) \" #items></bizdoc-browse-items>\r\n", styles: [":host{min-width:560px}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: SessionService }, { type: Popup }, { type: PanesRouter }, { type: i7$2.Directionality }, { type: TranslateService }, { type: i7$6.BreakpointObserver }, { type: i2$2.MatDialog }], propDecorators: { items: [{
                 type: ViewChild,
                 args: [BrowseItemsComponent, { static: true }]
@@ -13389,7 +13336,7 @@ class TaggingPipe {
         if (EMOJI_REGEX.test(text))
             text = text.replace(EMOJI_REGEX, (emoji) => `<i class="material-icons">${EMOJI_MAP[emoji]}</i>`);
         if (DOCUMENT_REGEX.test(text)) {
-            text = text.replace(DOCUMENT_REGEX, (e, number) => `<a data-id="${resource[number].encodeId()}">${e}</a>`);
+            text = text.replace(DOCUMENT_REGEX, (e, number) => `<a data-id="${resource[number].toString()}">${e}</a>`);
         }
         if (USER_REGEX.test(text)) {
             text = text.replace(USER_REGEX, (_, name) => {
@@ -13412,7 +13359,7 @@ class TaggingPipe {
         if (src.tagName === 'A') {
             const id = src.getAttribute('data-id');
             if (id) {
-                this._router.navigate(['mailbox/d', id], {});
+                this._router.navigate(['mailbox/d', parseInt(id).encodeId()], {});
                 evt.preventDefault();
             }
             else {
@@ -15687,7 +15634,7 @@ class FlowViewComponent extends TraceBase {
                         annotations: [{
                                 style: {
                                     color: node.estimate ? this.dimColor : this.defaultColor,
-                                    //fill: this.transparentColor
+                                    fill: this.transparentColor
                                     //opacity: node.estimate ? .6 : 1,
                                 },
                                 content: annotation,
@@ -15799,7 +15746,7 @@ class FlowViewComponent extends TraceBase {
                             } : { x: .5 },
                             style: {
                                 color: node.estimate ? this.dimColor : this.defaultColor,
-                                //fill: this.transparentColor
+                                fill: this.transparentColor
                                 //opacity: node.estimate ? .6 : 1,
                             },
                             verticalAlignment: shape.type === 'Path' ? 'Top' : 'Center'
@@ -18283,6 +18230,7 @@ class ContentMessageNotification extends NotificationBase {
     constructor(vc) {
         super();
         this._factory = inject(BizDocComponentFactoryResolver);
+        // map
         if (!ContentMessageNotification._tamplateMap) {
             ContentMessageNotification._tamplateMap = {};
             this._session.profile.notifications.forEach(n => {
@@ -18292,12 +18240,7 @@ class ContentMessageNotification extends NotificationBase {
         const { content, contentType } = this.notification.message;
         const template = ContentMessageNotification._tamplateMap[contentType];
         const comp = this._factory.component(template);
-        const compRef = vc.createComponent(comp, {
-        //  injector: Injector.create([{
-        //    provide: NotificationRef,
-        //    value: new NotificationRef()
-        //  }])
-        });
+        const compRef = vc.createComponent(comp);
         compRef.instance.onBind(content);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ContentMessageNotification, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -19410,11 +19353,11 @@ class OutOfOfficeToast {
         this._ref.dismiss();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: OutOfOfficeToast, deps: [{ token: RouterImpl }, { token: AccountService }, { token: MAT_SNACK_BAR_DATA }, { token: i3.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: OutOfOfficeToast, isStandalone: false, selector: "bizdoc-outofoffice", ngImport: i0, template: "<div matSnackBarLabel>\r\n  @if (substitute) {\r\n  <span [innerHTML]=\"'OutOfOfficeOn'|translate:substitute.name|sanitizeHtml\"></span>\r\n  }\r\n</div>\r\n<div matSnackBarActions>\r\n  <button mat-stroked-button matSnackBarAction (click)=\"options()\" color=\"warn\">{{'ChangeOptions'|translate}}</button>\r\n  <button matSnackBarAction mat-icon-button (click)=\"dismiss()\" [bizdocTooltip]=\"'Dismiss'|translate\"><mat-icon>close</mat-icon></button>\r\n</div>\r\n", styles: ["div{flex-direction:row;box-sizing:border-box;display:flex;align-items:center}div span{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i3.MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: i3.MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: i3.MatSnackBarAction, selector: "[matSnackBarAction]" }, { 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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: OutOfOfficeToast, isStandalone: false, selector: "bizdoc-outofoffice", ngImport: i0, template: "<div matSnackBarLabel>\r\n  @if (substitute) {\r\n  <span [innerHTML]=\"'OutOfOfficeOn'|translate:substitute.name|sanitizeHtml\"></span>\r\n  }\r\n</div>\r\n<div matSnackBarActions>\r\n  <button mat-stroked-button matSnackBarAction (click)=\"options()\" color=\"warn\">{{'ChangeOptions'|translate}}</button>\r\n  <button matSnackBarAction mat-icon-button (click)=\"dismiss()\" [bizdocTooltip]=\"'Dismiss'|translate\"><mat-icon>close</mat-icon></button>\r\n</div>\r\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: i3.MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: i3.MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: i3.MatSnackBarAction, selector: "[matSnackBarAction]" }, { 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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: OutOfOfficeToast, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-outofoffice', template: "<div matSnackBarLabel>\r\n  @if (substitute) {\r\n  <span [innerHTML]=\"'OutOfOfficeOn'|translate:substitute.name|sanitizeHtml\"></span>\r\n  }\r\n</div>\r\n<div matSnackBarActions>\r\n  <button mat-stroked-button matSnackBarAction (click)=\"options()\" color=\"warn\">{{'ChangeOptions'|translate}}</button>\r\n  <button matSnackBarAction mat-icon-button (click)=\"dismiss()\" [bizdocTooltip]=\"'Dismiss'|translate\"><mat-icon>close</mat-icon></button>\r\n</div>\r\n", styles: ["div{flex-direction:row;box-sizing:border-box;display:flex;align-items:center}div span{flex:1 1 auto}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-outofoffice', template: "<div matSnackBarLabel>\r\n  @if (substitute) {\r\n  <span [innerHTML]=\"'OutOfOfficeOn'|translate:substitute.name|sanitizeHtml\"></span>\r\n  }\r\n</div>\r\n<div matSnackBarActions>\r\n  <button mat-stroked-button matSnackBarAction (click)=\"options()\" color=\"warn\">{{'ChangeOptions'|translate}}</button>\r\n  <button matSnackBarAction mat-icon-button (click)=\"dismiss()\" [bizdocTooltip]=\"'Dismiss'|translate\"><mat-icon>close</mat-icon></button>\r\n</div>\r\n", styles: [":host{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: RouterImpl }, { type: AccountService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
@@ -19652,11 +19595,11 @@ class QuickNotificationsComponent extends NotificationsComponentBase {
         this._service.mute(item.id, mute);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: QuickNotificationsComponent, deps: [{ token: PopupRef }, { token: RouterImpl }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: QuickNotificationsComponent, isStandalone: false, selector: "bizdoc-notifications", usesInheritance: true, ngImport: i0, template: "<mat-list role=\"list\">\r\n  <!--dense-->\r\n  @for (n of notifications | sort: 'sent' : 'desc' | slice:0:9; track n.id; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 matListItemTitle><ng-container *ngComponentOutlet=\"n.comp; injector: n.injector\" ></ng-container></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amDateFormat: 'lll'\">{{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-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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: i2$5.MatList, selector: "mat-list", exportAs: ["matList"] }, { 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: DateFormatPipe, name: "amDateFormat" }, { 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.1.0", 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.id; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 matListItemTitle><ng-container *ngComponentOutlet=\"n.comp; injector: n.injector\" ></ng-container></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amDateFormat: 'lll'\">{{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", "ngComponentOutletEnvironmentInjector", "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: DateFormatPipe, name: "amDateFormat" }, { 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.1.0", ngImport: i0, type: QuickNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-notifications', template: "<mat-list role=\"list\">\r\n  <!--dense-->\r\n  @for (n of notifications | sort: 'sent' : 'desc' | slice:0:9; track n.id; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 matListItemTitle><ng-container *ngComponentOutlet=\"n.comp; injector: n.injector\" ></ng-container></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amDateFormat: 'lll'\">{{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-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.id; let i = $index) {\r\n    <mat-list-item role=\"listitem\" class=\"item\" [class.read]=\"n.read\" (click)=\"open(n, $event)\">\r\n      <h3 matListItemTitle><ng-container *ngComponentOutlet=\"n.comp; injector: n.injector\" ></ng-container></h3>\r\n      <span matListItemLine [bizdocTooltip]=\"n.sent | amDateFormat: 'lll'\">{{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 {
@@ -21881,9 +21824,7 @@ class ImpersonateDialog {
             next: () => {
                 this._sb.mask('Refreshing');
                 location.replace('/');
-            }, error: () => {
-                this._sb.error();
-            }
+            }, error: this._sb.error.bind(this)
         }).add(() => this.logging = false);
     }
     display(item) {
@@ -24604,7 +24545,7 @@ let ActionsWidget = class ActionsWidget {
     }
     _draw() {
         this.chart?.destroy();
-        this._loaded.pipe(takeUntil(this._destroy), delay(200), filter$1(v => v)).subscribe(() => this.chart = new AccumulationChart({
+        this._loaded.pipe(takeUntil(this._destroy), delay(500), filter$1(v => v)).subscribe(() => this.chart = new AccumulationChart({
             background: 'transparent',
             legendSettings: this.legendSettings, enableAnimation: true,
             tooltip: this.tooltip,