@bizdoc/core 3.9.0 → 3.9.2

package/fesm2022/bizdoc-core.mjs

@@ -9031,100 +9031,104 @@ class ExpandedItemComponent {
         this.actions = actions && actions.length ? this._session.profile.actions.filter(a => actions.indexOf(a.name) > -1) : undefined;
         this._sender();
         this._comments();
-        this._note();
+        this.note = await this._note();
         this._awaiting();
     }
     /** */
     async _note() {
-        const { ownerId, ownerBy, issued, substituteId, received, replied, log, id, note, repliedBy, actionId, escalated, originId, draft } = this.model;
-        let target;
-        if (actionId)
-            target = await this._target(id);
+        const { ownerId, ownerBy, issued, substituteId, received, replied, log, id, note, repliedBy, actionId, escalated, originId, draft } = this.model, { profile } = this._session;
         if (substituteId) {
             const substituting = await firstValueFrom(this._accounts.get(substituteId));
             if (replied) {
-                const time = this._fromNow(replied), aaction = this._session.profile.actions.find(a => a.name === actionId), adjective = (aaction.adjective || aaction.title).toLowerCase();
+                const time = this._fromNow(replied), action = this._actionName(actionId, 'adjective');
+                const target = await this._target(id);
                 if (target)
-                    this.note = this._translate.personalize('YouSubstituteActionTakenTo', substituting.gender, adjective, target, this._formatUserElement(substituting), time);
+                    return this._translate.personalize('YouSubstituteActionTakenTo', substituting.gender, action, target, this._formatUserElement(substituting), time);
                 else
-                    this.note = this._translate.personalize('YouSubstituteActionTaken', substituting.gender, adjective, this._formatUserElement(substituting), time);
+                    return this._translate.personalize('YouSubstituteActionTaken', substituting.gender, action, this._formatUserElement(substituting), time);
             }
             else if (escalated) {
                 const escalation = log.find(l => l.type === 'Escalation' && l.recipientId === originId);
-                this.note = this._translate.personalize('EscalatedFrom', substituting.gender, this._formatUserElement(substituting), this._duration(escalation.duration));
+                return this._translate.personalize('EscalatedFrom', substituting.gender, this._formatUserElement(substituting), this._duration(escalation.duration));
             }
             else {
                 const time = this._fromNow(received);
-                this.note = this._translate.personalize('SubstitutingNote', substituting.gender, this._formatUserElement(substituting), time, note || '');
+                return this._translate.personalize('SubstitutingNote', substituting.gender, this._formatUserElement(substituting), time, note || '');
             }
         }
-        else if (replied) {
+        else if (actionId) {
+            const target = await this._target(id);
             const time = this._fromNow(replied);
             if (repliedBy) {
                 if (repliedBy === this._session.userId) {
+                    const action = this._actionName(actionId, 'you');
                     if (target)
-                        this.note = this._translate.get('ActionTakenByYouTo', this._actionName(actionId, 'you'), target, this._session.profile.name, time);
+                        return this._translate.get('ActionTakenByYouTo', action, target, profile.name, time);
                     else
-                        this.note = this._translate.get('ActionTakenByYou', this._actionName(actionId, 'you'), this._session.profile.name, time);
+                        return this._translate.get('ActionTakenByYou', action, profile.name, time);
+                }
+                else {
+                    const by = await firstValueFrom(this._accounts.get(repliedBy));
+                    const action = this._actionName(actionId, by.gender);
+                    if (target)
+                        return this._translate.get('YouTakenActionByTo', this._formatUserElement(by), action, target, time);
+                    else
+                        return this._translate.get('YouTakenActionBy', this._formatUserElement(by), action, time);
                 }
-                else
-                    this._accounts.get(repliedBy).subscribe(u => {
-                        if (target)
-                            this.note = this._translate.get('YouTakenActionByTo', this._formatUserElement(u), this._actionName(actionId, u.gender), target, time);
-                        else
-                            this.note = this._translate.get('YouTakenActionBy', this._formatUserElement(u), this._actionName(actionId, u.gender), time);
-                    });
             }
-            else if (this._session.userId) {
+            else if (this._session.isImpersonating) {
+                const action = this._actionName(actionId, profile.gender);
                 if (target)
-                    this.note = this._translate.personalize('ActionTakenTo', this._session.profile.gender, this._session.profile.name, this._actionName(actionId, this._session.profile.gender), target, time);
+                    return this._translate.personalize('ActionTakenTo', profile.gender, profile.name, action, target, time);
                 else
-                    this.note = this._translate.personalize('ActionTaken', this._session.profile.gender, this._session.profile.name, this._actionName(actionId, this._session.profile.gender), time);
+                    return this._translate.personalize('ActionTaken', profile.gender, profile.name, action, time);
             }
             else {
+                const action = this._actionName(actionId, 'you');
                 if (target)
-                    this.note = this._translate.get('YouTakenActionTo', this._actionName(actionId, 'you'), target, time);
+                    return this._translate.get('YouTakenActionTo', action, target, time);
                 else
-                    this.note = this._translate.get('YouTakenAction', this._actionName(actionId, 'you'), time);
+                    return this._translate.get('YouTakenAction', action, time);
             }
         }
         else if (note)
-            this.note = note;
+            return note;
         else if (originId) {
             const origin = this.model.recipients.find(r => r.id === originId);
-            const action = this._session.profile.actions.find(a => a.name === origin.actionId), adjective = action.adjective || action.past || action.title;
+            const action = this._actionName(origin.actionId, 'adjective');
             if ((origin.repliedBy || origin.userId) === this._session.userId)
-                this.note = this._translate.get('ActionByYou', adjective);
+                return this._translate.get('ActionByYou', action);
             else if (origin.repliedBy) {
                 const who = await firstValueFrom(this._accounts.get(origin.userId));
                 const by = await firstValueFrom(this._accounts.get(origin.repliedBy));
-                this.note = this._translate.get('ActionByBy', adjective, by.name, who.name);
+                return this._translate.get('ActionByBy', action, by.name, who.name);
             }
             else {
                 const who = await firstValueFrom(this._accounts.get(origin.userId));
-                this.note = this._translate.get('ActionBy', adjective, who.name);
+                return this._translate.get('ActionBy', action, who.name);
             }
         }
         else if (ownerId === this._session.userId && !draft) {
             const time = this._fromNow(issued);
             if (ownerBy) {
                 if (ownerBy === this._session.userId)
-                    this.note = this._translate.personalize('YouSubmittedNoteBy', this._session.profile.byGender, this._session.profile.name, time);
+                    return this._translate.personalize('YouSubmittedNoteBy', profile.byGender, profile.name, time);
                 else {
                     const by = await firstValueFrom(this._accounts.get(ownerBy));
                     if (this._session.isImpersonating)
-                        this.note = this._translate.personalize('SubmittedNoteBy', by.gender, this._formatUserElement(by), this._session.profile.name, time);
+                        return this._translate.personalize('SubmittedNoteBy', by.gender, this._formatUserElement(by), profile.name, time);
                     else
-                        this.note = this._translate.personalize('SubmittedNoteYouBy', by.gender, this._formatUserElement(by), time);
+                        return this._translate.personalize('SubmittedNoteYouBy', by.gender, this._formatUserElement(by), time);
                 }
             }
             else {
                 if (this._session.isImpersonating)
-                    this.note = this._translate.personalize('SubmittedNote', this._session.profile.gender, this._session.profile.name, time);
+                    return this._translate.personalize('SubmittedNote', profile.gender, profile.name, time);
                 else
-                    this.note = this._translate.get('YouSubmittedNote', time);
+                    return this._translate.get('YouSubmittedNote', time);
             }
         }
+        return null;
     }
     async _target(id) {
         const origins = this.model.recipients.filter(r => r.originId === id);
@@ -9132,23 +9136,30 @@ class ExpandedItemComponent {
             const users = await firstValueFrom(this._accounts.getAll(origins.map(r => r.userId)));
             return this._translate.join(users.map(u => this._formatUserElement(u)));
         }
-        return undefined;
+        return null;
     }
     _actionName(name, gender) {
         const action = this._session.profile.actions.find(a => a.name === name);
         if (!action)
             return name;
-        if (gender === 'you') {
-            const gender = this._session.gender;
-            return ((gender === 'Male' ? (action.youMale || action.you) :
-                gender === 'Female' ? (action.youFemale || action.you) :
-                    action.you) || action.past ||
-                action.title).toLowerCase();
-        }
-        return ((gender === 'Male' ? (action.pastMale || action.past) :
-            gender === 'Female' ? (action.pastFemale || action.past) :
-                action.past) ||
-            action.title).toLowerCase();
+        switch (gender) {
+            case 'adjective':
+                return (action.adjective || action.past || action.title).toLowerCase();
+            case 'you':
+                const gender = this._session.gender;
+                return ((gender === 'Male' ? (action.youMale || action.you) :
+                    gender === 'Female' ? (action.youFemale || action.you) :
+                        action.you) || action.past ||
+                    action.title).toLowerCase();
+            case 'Male':
+                return (action.pastMale || action.past ||
+                    action.title).toLowerCase();
+            case 'Female':
+                return (action.pastFemale || action.past ||
+                    action.title).toLowerCase();
+            default:
+                return (action.past || action.title).toLowerCase();
+        }
     }
     _fromNow(date) {
         return dayjs(date).fromNow();
@@ -9234,7 +9245,7 @@ class ExpandedItemComponent {
                 this._mailbox.send(id, version, formId, null, action, args).subscribe({
                     next: async (r) => {
                         const target = await this._target(id);
-                        const adjective = this._getActionAdjective(action);
+                        const adjective = this._actionName(action, 'adjective');
                         if (target)
                             this._sb.toast('SentTo', number, adjective, target);
                         else
@@ -9250,10 +9261,6 @@ class ExpandedItemComponent {
             }
         });
     }
-    _getActionAdjective(action) {
-        const caction = this._session.profile.actions.find(a => a.name === action), adjective = caction.adjective || caction.title;
-        return adjective.toLowerCase();
-    }
     /**
      *
      * @param response
@@ -10577,11 +10584,11 @@ class ComposePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ComposePaneComponent, deps: [{ token: SessionService }, { token: MailboxService }, { token: PaneRef }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ComposePaneComponent, isStandalone: false, selector: "bizdoc-compose-pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n    @if (page !== undefined) {\r\n    <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n    </button>\r\n    }\r\n    @if (model.draft) {\r\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n            (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n        <span>{{'Submit' | translate}}</span>\r\n    </button>\r\n    }\r\n    @if (form.actions.length === 1) {\r\n    <button mat-stroked-button [color]=\"!model.draft ? 'primary' : null\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions![0])\" [disabled]=\"!valid||working\">\r\n        <span>{{form.actions[0].title}}</span>\r\n        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n        <span>{{'Send' | translate}}</span>\r\n    </button>\r\n    }\r\n    <!-- action -->\r\n    <mat-menu #actionMenu>\r\n        <ng-template matMenuContent>\r\n            @for (a of form.actions; track a; let i = $index) {\r\n            @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n            }\r\n        </ng-template>\r\n    </mat-menu>\r\n    <!--<ng-template #actionsPane>\r\n      <mat-list>\r\n        @for (a of form.actions; track a; let i = $index) {\r\n        @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n        }\r\n      </mat-list>\r\n    </ng-template>-->\r\n    @if (mode === 'compose') {\r\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n        <mat-icon>save</mat-icon>\r\n    </button>\r\n    }\r\n    <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"form.userTags\">bookmark</mat-icon></button>\r\n    <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n    <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n    @if (mode !== 'compose' && model.pending && !model.completed) {\r\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n    <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n    </button>\r\n    @if (enableInsights) {\r\n    <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    @if (expendable) {\r\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n    }\r\n    <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n    <mat-menu #optionsMenu=\"matMenu\">\r\n        <ng-template matMenuContent>\r\n            <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n                <!--<mat-icon>content_copy</mat-icon>-->\r\n                <span>{{'Copy' | translate}}</span>\r\n            </button>\r\n            @if (model.draft && !model.issued) {\r\n            <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n                <!--<mat-icon>delete_outlined</mat-icon>-->\r\n                <span>{{'Discard' | translate}}</span>\r\n            </button>\r\n            }\r\n            @if (form.help) {\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n                <!--<mat-icon>help_outline</mat-icon>-->\r\n                <span>{{'Help' | translate}}</span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n        </ng-template>\r\n    </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n    <bizdoc-form [model]=model [page]=\"page\" #form\r\n                 (modelChange)=\"change()\"\r\n                 (saved)=\"saved()\"\r\n                 (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}button{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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: "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: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ComposePaneComponent, isStandalone: false, selector: "bizdoc-compose-pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n    @if (page !== undefined) {\r\n    <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n    </button>\r\n    }\r\n    @if (model.draft) {\r\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n            (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n        <span>{{'Submit' | translate}}</span>\r\n    </button>\r\n    }\r\n    @if (form.actions.length === 1) {\r\n    <button mat-stroked-button [color]=\"!model.draft ? 'primary' : null\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions![0])\" [disabled]=\"!valid||working\">\r\n        <span>{{form.actions[0].title}}</span>\r\n        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n        <span>{{'Send' | translate}}</span>\r\n    </button>\r\n    }\r\n    <!-- action -->\r\n    <mat-menu #actionMenu>\r\n        <ng-template matMenuContent>\r\n            @for (a of form.actions; track a; let i = $index) {\r\n            @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n            }\r\n        </ng-template>\r\n    </mat-menu>\r\n    <!--<ng-template #actionsPane>\r\n      <mat-list>\r\n        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n      </mat-list>\r\n    </ng-template>-->\r\n    @if (mode === 'compose') {\r\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n        <mat-icon>save</mat-icon>\r\n    </button>\r\n    }\r\n    <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"form.userTags\">bookmark</mat-icon></button>\r\n    <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n    <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n    @if (mode !== 'compose' && model.pending && !model.completed) {\r\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>network_node</mat-icon></button>\r\n    <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n    </button>\r\n    @if (enableInsights) {\r\n    <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    @if (expendable) {\r\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n    }\r\n    <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n    <mat-menu #optionsMenu=\"matMenu\">\r\n        <ng-template matMenuContent>\r\n            <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n                <!--<mat-icon>content_copy</mat-icon>-->\r\n                <span>{{'Copy' | translate}}</span>\r\n            </button>\r\n            @if (model.draft && !model.issued) {\r\n            <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n                <!--<mat-icon>delete_outlined</mat-icon>-->\r\n                <span>{{'Discard' | translate}}</span>\r\n            </button>\r\n            }\r\n            @if (form.help) {\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n                <!--<mat-icon>help_outline</mat-icon>-->\r\n                <span>{{'Help' | translate}}</span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n        </ng-template>\r\n    </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n    <bizdoc-form [model]=model [page]=\"page\" #form\r\n                 (modelChange)=\"change()\"\r\n                 (saved)=\"saved()\"\r\n                 (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}button{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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: "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: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ComposePaneComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-compose-pane', template: "<mat-toolbar class=\"nav-toolbar\">\r\n    @if (page !== undefined) {\r\n    <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n    </button>\r\n    }\r\n    @if (model.draft) {\r\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n            (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n        <span>{{'Submit' | translate}}</span>\r\n    </button>\r\n    }\r\n    @if (form.actions.length === 1) {\r\n    <button mat-stroked-button [color]=\"!model.draft ? 'primary' : null\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions![0])\" [disabled]=\"!valid||working\">\r\n        <span>{{form.actions[0].title}}</span>\r\n        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n        <span>{{'Send' | translate}}</span>\r\n    </button>\r\n    }\r\n    <!-- action -->\r\n    <mat-menu #actionMenu>\r\n        <ng-template matMenuContent>\r\n            @for (a of form.actions; track a; let i = $index) {\r\n            @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n            }\r\n        </ng-template>\r\n    </mat-menu>\r\n    <!--<ng-template #actionsPane>\r\n      <mat-list>\r\n        @for (a of form.actions; track a; let i = $index) {\r\n        @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n        }\r\n      </mat-list>\r\n    </ng-template>-->\r\n    @if (mode === 'compose') {\r\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n        <mat-icon>save</mat-icon>\r\n    </button>\r\n    }\r\n    <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"form.userTags\">bookmark</mat-icon></button>\r\n    <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n    <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n    @if (mode !== 'compose' && model.pending && !model.completed) {\r\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n    <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n    </button>\r\n    @if (enableInsights) {\r\n    <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    @if (expendable) {\r\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n    }\r\n    <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n    <mat-menu #optionsMenu=\"matMenu\">\r\n        <ng-template matMenuContent>\r\n            <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n                <!--<mat-icon>content_copy</mat-icon>-->\r\n                <span>{{'Copy' | translate}}</span>\r\n            </button>\r\n            @if (model.draft && !model.issued) {\r\n            <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n                <!--<mat-icon>delete_outlined</mat-icon>-->\r\n                <span>{{'Discard' | translate}}</span>\r\n            </button>\r\n            }\r\n            @if (form.help) {\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n                <!--<mat-icon>help_outline</mat-icon>-->\r\n                <span>{{'Help' | translate}}</span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n        </ng-template>\r\n    </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n    <bizdoc-form [model]=model [page]=\"page\" #form\r\n                 (modelChange)=\"change()\"\r\n                 (saved)=\"saved()\"\r\n                 (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}button{margin-inline-end:6px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-compose-pane', template: "<mat-toolbar class=\"nav-toolbar\">\r\n    @if (page !== undefined) {\r\n    <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n    </button>\r\n    }\r\n    @if (model.draft) {\r\n    <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n            (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n        <span>{{'Submit' | translate}}</span>\r\n    </button>\r\n    }\r\n    @if (form.actions.length === 1) {\r\n    <button mat-stroked-button [color]=\"!model.draft ? 'primary' : null\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions![0])\" [disabled]=\"!valid||working\">\r\n        <span>{{form.actions[0].title}}</span>\r\n        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n        <span>{{'Send' | translate}}</span>\r\n    </button>\r\n    }\r\n    <!-- action -->\r\n    <mat-menu #actionMenu>\r\n        <ng-template matMenuContent>\r\n            @for (a of form.actions; track a; let i = $index) {\r\n            @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n            }\r\n        </ng-template>\r\n    </mat-menu>\r\n    <!--<ng-template #actionsPane>\r\n      <mat-list>\r\n        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n      </mat-list>\r\n    </ng-template>-->\r\n    @if (mode === 'compose') {\r\n    <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n        <mat-icon>save</mat-icon>\r\n    </button>\r\n    }\r\n    <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"form.userTags\">bookmark</mat-icon></button>\r\n    <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n    <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n    @if (mode !== 'compose' && model.pending && !model.completed) {\r\n    <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>network_node</mat-icon></button>\r\n    <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n    </button>\r\n    @if (enableInsights) {\r\n    <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    @if (expendable) {\r\n    <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n    }\r\n    <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n    <mat-menu #optionsMenu=\"matMenu\">\r\n        <ng-template matMenuContent>\r\n            <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n                <!--<mat-icon>content_copy</mat-icon>-->\r\n                <span>{{'Copy' | translate}}</span>\r\n            </button>\r\n            @if (model.draft && !model.issued) {\r\n            <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n                <!--<mat-icon>delete_outlined</mat-icon>-->\r\n                <span>{{'Discard' | translate}}</span>\r\n            </button>\r\n            }\r\n            @if (form.help) {\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n                <!--<mat-icon>help_outline</mat-icon>-->\r\n                <span>{{'Help' | translate}}</span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n        </ng-template>\r\n    </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n    <bizdoc-form [model]=model [page]=\"page\" #form\r\n                 (modelChange)=\"change()\"\r\n                 (saved)=\"saved()\"\r\n                 (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}button{margin-inline-end:6px}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: MailboxService }, { type: PaneRef }, { type: PanesRouter }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -13692,13 +13699,13 @@ class CommentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CommentComponent, deps: [{ token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: ChatInfo }, { token: AccountService }, { token: Popup }, { token: i2$3.Overlay }, { token: MailboxService }, { token: i0.ViewContainerRef }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: CommentComponent, isStandalone: false, selector: "bizdoc-comment", inputs: { model: "model", item: "item" }, outputs: { deleted: "deleted", reply: "reply" }, host: { classAttribute: "comment" }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  <!-- menu -->\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"comment-menu\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<!-- reply -->\r\n@if(item.reply) {\r\n<div class=\"column comment-reply\">\r\n  <div class=\"row\">\r\n    <div [innerHTML]=\"item.reply.text|taggingHtml:item.reply.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.reply.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.reply.image\" alt=\"\" (click)=\"null\" />\r\n    }\r\n  </div>\r\n  <div class=\"row\">\r\n    <small class=\"comment-tools\">\r\n      <span class=\"flex\" [bizdocTooltip]=\"item.reply.time | amDateFormat: 'lll'\">{{item.reply.time | amTimeAgo}}</span>\r\n    </small>\r\n  </div>\r\n</div>\r\n}\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <small [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\" class=\"uname\"></small>\r\n    <small class=\"comment-tools flex\">\r\n      <span class=\"flex\" [bizdocTooltip]=\"(item.edited || item.time) | amDateFormat: 'lll'\">{{(item.edited || item.time) | amTimeAgo}}</span>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </small>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <small class=\"comment-tools\"><a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a></small>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i2$3.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: CommentComponent, isStandalone: false, selector: "bizdoc-comment", inputs: { model: "model", item: "item" }, outputs: { deleted: "deleted", reply: "reply" }, host: { classAttribute: "comment" }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "previewTemplate", first: true, predicate: ["previewTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  <!-- menu -->\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"comment-menu\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<!-- reply -->\r\n@if(item.reply) {\r\n<div class=\"column comment-reply\">\r\n  <div class=\"row\">\r\n    <div [innerHTML]=\"item.reply.text|taggingHtml:item.reply.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.reply.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.reply.image\" alt=\"\" (click)=\"null\" />\r\n    }\r\n  </div>\r\n  <div class=\"row\">\r\n    <small class=\"comment-tools\">\r\n      <span [bizdocTooltip]=\"item.reply.time | amDateFormat: 'lll'\">{{item.reply.time | amTimeAgo}}</span>\r\n    </small>\r\n  </div>\r\n</div>\r\n}\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <small [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\" class=\"uname\"></small>\r\n    <small class=\"comment-tools flex\">\r\n      <span class=\"flex\" [bizdocTooltip]=\"(item.edited || item.time) | amDateFormat: 'lll'\">{{(item.edited || item.time) | amTimeAgo}}</span>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\">{{'Reply'| translate}}</a>\r\n      }\r\n    </small>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i2$3.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TaggingPipe, name: "taggingHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'bizdoc-comment', host: {
                         class: 'comment'
-                    }, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  <!-- menu -->\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"comment-menu\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<!-- reply -->\r\n@if(item.reply) {\r\n<div class=\"column comment-reply\">\r\n  <div class=\"row\">\r\n    <div [innerHTML]=\"item.reply.text|taggingHtml:item.reply.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.reply.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.reply.image\" alt=\"\" (click)=\"null\" />\r\n    }\r\n  </div>\r\n  <div class=\"row\">\r\n    <small class=\"comment-tools\">\r\n      <span class=\"flex\" [bizdocTooltip]=\"item.reply.time | amDateFormat: 'lll'\">{{item.reply.time | amTimeAgo}}</span>\r\n    </small>\r\n  </div>\r\n</div>\r\n}\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <small [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\" class=\"uname\"></small>\r\n    <small class=\"comment-tools flex\">\r\n      <span class=\"flex\" [bizdocTooltip]=\"(item.edited || item.time) | amDateFormat: 'lll'\">{{(item.edited || item.time) | amTimeAgo}}</span>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </small>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <small class=\"comment-tools\"><a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a></small>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n" }]
+                    }, template: "<div class=\"row\">\r\n  <div class=\"comment-body\" #body>\r\n    <div [innerHTML]=\"item.text|taggingHtml:item.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  <!-- menu -->\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"comment-menu\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<!-- reply -->\r\n@if(item.reply) {\r\n<div class=\"column comment-reply\">\r\n  <div class=\"row\">\r\n    <div [innerHTML]=\"item.reply.text|taggingHtml:item.reply.resource\" class=\"comment-text mat-body-1\"></div>\r\n    @if (item.reply.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.reply.image\" alt=\"\" (click)=\"null\" />\r\n    }\r\n  </div>\r\n  <div class=\"row\">\r\n    <small class=\"comment-tools\">\r\n      <span [bizdocTooltip]=\"item.reply.time | amDateFormat: 'lll'\">{{item.reply.time | amTimeAgo}}</span>\r\n    </small>\r\n  </div>\r\n</div>\r\n}\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <small [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\" class=\"uname\"></small>\r\n    <small class=\"comment-tools flex\">\r\n      <span class=\"flex\" [bizdocTooltip]=\"(item.edited || item.time) | amDateFormat: 'lll'\">{{(item.edited || item.time) | amTimeAgo}}</span>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\">{{'Reply'| translate}}</a>\r\n      }\r\n    </small>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [{ type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: ChatInfo }, { type: AccountService }, { type: Popup }, { type: i2$3.Overlay }, { type: MailboxService }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -13824,12 +13831,12 @@ class CommentsComponent {
     reply(item) {
         this._replyTo = item;
         this._accounts.get(item.byId || item.userId).
-            subscribe(u => this.replyName = this._translate.get('ReplyTo', this._formatUserElement(u)));
+            subscribe(u => this.replyName = u.name);
         this.input.focus();
     }
     clearReply() {
-        this._replyTo = undefined;
-        this.replyName = undefined;
+        this._replyTo = null;
+        this.replyName = null;
     }
     ngAfterViewInit() {
         const { comments } = this.model;
@@ -13912,13 +13919,13 @@ class CommentsComponent {
             window.localStorage.setItem(id, this.input.text);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CommentsComponent, deps: [{ token: AccountService }, { token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: ChatInfo }, { token: MailboxService }, { token: HubService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: CommentsComponent, isStandalone: false, selector: "bizdoc-comments", inputs: { model: "model" }, outputs: { change: "change" }, host: { classAttribute: "comments" }, viewQueries: [{ propertyName: "threadElement", first: true, predicate: ["thread"], descendants: true, read: ElementRef, static: true }, { propertyName: "input", first: true, predicate: EditInputComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!model.comments.length) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread mat-body\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container>\r\n      @if (!c.deleted || showDeleted.has(c.id)) {\r\n        <bizdoc-comment role=\"listitem\"\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted.add(c.id)\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing mat-body\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply mat-body\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\" class=\"uname\"></span>\r\n    &nbsp; <a class=\"comment-cancel-reply\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .comment-cancel-reply{font-size:medium}\n"], dependencies: [{ kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: CommentComponent, selector: "bizdoc-comment", inputs: ["model", "item"], outputs: ["deleted", "reply"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: CommentsComponent, isStandalone: false, selector: "bizdoc-comments", inputs: { model: "model" }, outputs: { change: "change" }, host: { classAttribute: "comments" }, viewQueries: [{ propertyName: "threadElement", first: true, predicate: ["thread"], descendants: true, read: ElementRef, static: true }, { propertyName: "input", first: true, predicate: EditInputComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!model.comments.length) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread mat-body\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container>\r\n      @if (!c.deleted || showDeleted.has(c.id)) {\r\n        <bizdoc-comment role=\"listitem\"\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted.add(c.id)\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<small class=\"mat-body comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</small>\r\n\r\n@if (replyName) {\r\n<small class=\"mat-body comments-reply\">\r\n  {{'ReplyTo' |translate : replyName }}\r\n  &nbsp; <a class=\"comment-cancel-reply\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n</small>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center}.comments-typing,.comments-reply{font-size:11px;padding:0 8px}.comments-reply .comment-cancel-reply{font-variant:small-caps}\n"], dependencies: [{ kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: CommentComponent, selector: "bizdoc-comment", inputs: ["model", "item"], outputs: ["deleted", "reply"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CommentsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'bizdoc-comments', host: {
                         class: 'comments'
-                    }, template: "@if (!model.comments.length) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread mat-body\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container>\r\n      @if (!c.deleted || showDeleted.has(c.id)) {\r\n        <bizdoc-comment role=\"listitem\"\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted.add(c.id)\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing mat-body\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply mat-body\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\" class=\"uname\"></span>\r\n    &nbsp; <a class=\"comment-cancel-reply\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .comment-cancel-reply{font-size:medium}\n"] }]
+                    }, template: "@if (!model.comments.length) {\r\n  <bizdoc-none icon=\"format_quote\"></bizdoc-none>\r\n}\r\n\r\n<div class=\"column comments-thread mat-body\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container>\r\n      @if (!c.deleted || showDeleted.has(c.id)) {\r\n        <bizdoc-comment role=\"listitem\"\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted.add(c.id)\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<small class=\"mat-body comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</small>\r\n\r\n@if (replyName) {\r\n<small class=\"mat-body comments-reply\">\r\n  {{'ReplyTo' |translate : replyName }}\r\n  &nbsp; <a class=\"comment-cancel-reply\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n</small>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center}.comments-typing,.comments-reply{font-size:11px;padding:0 8px}.comments-reply .comment-cancel-reply{font-variant:small-caps}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: ChatInfo }, { type: MailboxService }, { type: HubService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -15579,10 +15586,11 @@ const FYI_PATH = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 1
 /** flow-view component*/
 class FlowViewComponent extends TraceBase {
     /** workflow-view ctor */
-    constructor(_accounts, _translate, _duration, _elementRef, session, hub) {
+    constructor(_accounts, _translate, _popup, _duration, _elementRef, session, hub) {
         super(session, hub);
         this._accounts = _accounts;
         this._translate = _translate;
+        this._popup = _popup;
         this._duration = _duration;
         this._elementRef = _elementRef;
         this.connectorType = 'Bezier';
@@ -15661,6 +15669,7 @@ class FlowViewComponent extends TraceBase {
                 snapSettings: this.snapSettings,
                 scrollSettings: this.scrollSettings,
                 height: 560,
+                //  mouseEnter: this._mouseEnter.bind(this),
                 //layers: [
                 //  {
                 //    zIndex: 0,
@@ -15715,6 +15724,10 @@ class FlowViewComponent extends TraceBase {
                     n.tooltip.content = this._tooltip(n.addInfo.tooltip);
         });
     }
+    _mouseEnter(evt) {
+        evt.element.addInfo && evt.element.addInfo.tooltip &&
+            this._popup.open('', evt.actualObject);
+    }
     /** */
     async _prepare() {
         const { connectors: dconnectors, nodes: dnodes } = this.model.workflow;
@@ -16189,7 +16202,7 @@ class FlowViewComponent extends TraceBase {
                 else {
                     const who = await firstValueFrom(this._accounts.get(recipient.userId));
                     const action = this._action(recipient.actionId, who.gender);
-                    tooltip.note = this._translate.get('ActionTakenTo', who.name, action, this._translate.join(to));
+                    tooltip.note = this._translate.get('ActionTakenTo', who.name, action, this._translate.join(to), ago);
                 }
             }
             else if (this._session.isImpersonating) {
@@ -16282,7 +16295,7 @@ class FlowViewComponent extends TraceBase {
         this.diagram?.destroy();
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FlowViewComponent, deps: [{ token: AccountService }, { token: TranslateService }, { token: DurationFormatPipe }, { token: i0.ElementRef }, { token: SessionService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FlowViewComponent, deps: [{ token: AccountService }, { token: TranslateService }, { token: Popup }, { token: DurationFormatPipe }, { token: i0.ElementRef }, { token: SessionService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: FlowViewComponent, isStandalone: false, selector: "bizdoc-flow", inputs: { model: "model", version: "version", connectorType: "connectorType" }, host: { attributes: { "id": "diagram1", "dir": "ltr" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{min-height:500px;min-width:400px;background-color:transparent!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FlowViewComponent, decorators: [{
@@ -16291,7 +16304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         id: 'diagram1',
                         dir: 'ltr'
                     }, styles: [":host{min-height:500px;min-width:400px;background-color:transparent!important}\n"] }]
-        }], ctorParameters: () => [{ type: AccountService }, { type: TranslateService }, { type: DurationFormatPipe }, { type: i0.ElementRef }, { type: SessionService }, { type: HubService }], propDecorators: { model: [{
+        }], ctorParameters: () => [{ type: AccountService }, { type: TranslateService }, { type: Popup }, { type: DurationFormatPipe }, { type: i0.ElementRef }, { type: SessionService }, { type: HubService }], propDecorators: { model: [{
                 type: Input
             }], version: [{
                 type: Input
@@ -21588,11 +21601,11 @@ class HomeComponent extends HomeBase {
         item.instance.onPick();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HomeComponent, deps: [{ token: PanesRouter }, { token: SearchService }, { token: DocumentFactory }, { token: Popup }, { token: GuideService }, { token: AuthenticationImpl }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: HomeComponent, isStandalone: false, selector: "bizdoc-home", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "mat-app-background" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "main", first: true, predicate: ["main"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["input"], descendants: true, read: MatAutocompleteTrigger }], usesInheritance: true, ngImport: i0, template: "<!-- menu -->\r\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"subMenu\"\r\n     [class.dialog]=\"isDialogMode\"\r\n     class=\"nav-menu row\">\r\n\r\n  <div class=\"column\">\r\n    <!--@if(appLogo){\r\n    <img [src]=\"appLogo\" class=\"app-logo\" />\r\n    }-->\r\n    @if (forms.length) {\r\n    <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\r\n      <button mat-raised-button\r\n              [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n              (click)=\"openNew()\" [disabled]=\"creating\"\r\n              [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\r\n        <mat-icon>add</mat-icon>\r\n        <span class=\"nav-label\">{{'Compose'| translate}}</span>\r\n      </button>\r\n    </div>\r\n    }\r\n    <mat-nav-list>\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Dashboard' | translate\"\r\n                     (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\r\n                     data-help=\"dashboard\"\r\n                     [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openMailbox()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     [class.active]=\"activeMenu === 'mailbox'\"\r\n                     [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"!profile.inboxCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\r\n      </mat-list-item>\r\n      @if (schedulerEnabled) {\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Scheduler' | translate\"\r\n                     (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\r\n                     [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (chatEnabled) {\r\n      <mat-list-item class=\"nav-menu\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\r\n                     (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\r\n                     [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      @if (enableAnalysis && profile.cubes.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('cube')\"\r\n                     [class.active]=\"activeMenu === 'cube'\"\r\n                     [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\r\n        <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (profile.reports.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('reports')\"\r\n                     [class.active]=\"activeMenu === 'reports'\"\r\n                     [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (isSysAdmin) {\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('admin')\"\r\n                     [class.active]=\"activeMenu === 'admin'\"\r\n                     [bizdocTooltip]=\"'System'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\r\n        <mat-icon matListItemIcon>device_hub</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n    </mat-nav-list>\r\n    <span class=\"divider\"></span>\r\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\r\n    <div class=\"sign-in\">\r\n      <button mat-icon-button data-help=\"settings\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\r\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\r\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\r\n      </button>\r\n      @if(canSignOut) {\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button data-help=\"sign-in\" [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- -->\r\n  @if (subMenu) {\r\n  <div class=\"sub-menu\" (mouseleave)=\"collapseSubMenu()\" [@subMenu]=\"subMenuMode\" (@subMenu.done)=\"resize()\">\r\n    @if (subMenu !== 'new') {\r\n    <div class=\"action\">\r\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\r\n    </div>\r\n    }\r\n    @switch (subMenu) {\r\n    @case ('new') {\r\n    <bizdoc-new-menu (change)=\"closeSubMenu()\"></bizdoc-new-menu>\r\n    }\r\n    @case ('mailbox') {\r\n    <bizdoc-folders-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-folders-menu>\r\n    }\r\n    @case ('admin') {\r\n    <bizdoc-admin-menu [collapsed]=\"subMenuMode === 'shrink'\"></bizdoc-admin-menu>\r\n    }\r\n    @case ('reports') {\r\n    <bizdoc-reports-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-reports-menu>\r\n    }\r\n    @case ('cube') {\r\n    <bizdoc-cube-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-cube-menu>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n  @if (isDialogMode) {\r\n  <div class=\"backdrop\"></div>\r\n  }\r\n</div>\r\n<div class=\"main\">\r\n  <!-- title -->\r\n  <div class=\"row header\" [@title]=\"main.titleVariant\">\r\n    <h1>\r\n      @if (main.swap) {\r\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      }\r\n      @for (p of main.panes; track p.id; let first = $first) {\r\n      @if (!first) {\r\n      <span class=\"breadcrumbs\">\\</span>\r\n      }\r\n      {{p.title}}\r\n      }\r\n      @if (guide) {\r\n      <button mat-icon-button (click)=\"openGuide(guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n      }\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <!--search-->\r\n    <input type=\"text\"\r\n           [@search]=\"searching\"\r\n           (@search.done)=\"searching && focus()\"\r\n           #input\r\n           (keydown.escape)=\"collapse($event)\"\r\n           [attr.aria-label]=\"'Search'|translate\"\r\n           [formControl]=\"search\"\r\n           [matAutocomplete]=\"auto\" class=\"search-box\">\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\r\n      @for (o of results | async; track o) {\r\n      <mat-option [value]=\"o\">\r\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\r\n    <!--notifications-->\r\n    <button mat-icon-button (click)=\"openNotifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\r\n            [attr.aria-label]=\"'Notifications'| translate\"\r\n            data-help=\"notifications\">\r\n      <mat-icon [matBadge]=\"profile.messagesCount\" [matBadgeHidden]=\"!profile.messagesCount\"\r\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\r\n                [class.filled]=\"profile.messagesCount\">\r\n        {{profile.options.notifications?.active === true ? 'notifications':'notifications_off'}}\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <!--panes & tabs-->\r\n  <bizdoc-panes-outlet (dialogChange)=\"isDialogMode = $event\" #main></bizdoc-panes-outlet>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{z-index:1}.nav-menu .sub-menu{min-width:210px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-menu{padding:0}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex:1;overflow-x:hidden;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.main .header{margin:4px 4px 0 0;align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: 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.MatListItemIcon, selector: "[matListItemIcon]" }, { 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: 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: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: ["collapsed"] }, { kind: "component", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: ["dialogChange"] }, { kind: "component", type: CubeMenuComponent, selector: "bizdoc-cube-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ReportsMenuComponent, selector: "bizdoc-reports-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: FoldersMenuComponent, selector: "bizdoc-folders-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: ["change"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [subMenuAnimation, panesTitleAnimation, searchAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: HomeComponent, isStandalone: false, selector: "bizdoc-home", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "mat-app-background" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "main", first: true, predicate: ["main"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["input"], descendants: true, read: MatAutocompleteTrigger }], usesInheritance: true, ngImport: i0, template: "<!-- menu -->\r\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"subMenu\"\r\n     [class.dialog]=\"isDialogMode\"\r\n     class=\"nav-menu row\">\r\n\r\n  <div class=\"column\">\r\n    <!--@if(appLogo){\r\n    <img [src]=\"appLogo\" class=\"app-logo\" />\r\n    }-->\r\n    @if (forms.length) {\r\n    <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\r\n      <button mat-raised-button\r\n              [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n              (click)=\"openNew()\" [disabled]=\"creating\"\r\n              [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\r\n        <mat-icon>add</mat-icon>\r\n        <span class=\"nav-label\">{{'Compose'| translate}}</span>\r\n      </button>\r\n    </div>\r\n    }\r\n    <mat-nav-list>\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Dashboard' | translate\"\r\n                     (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\r\n                     data-help=\"dashboard\"\r\n                     [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openMailbox()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     [class.active]=\"activeMenu === 'mailbox'\"\r\n                     [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"!profile.inboxCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\r\n      </mat-list-item>\r\n      @if (schedulerEnabled) {\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Scheduler' | translate\"\r\n                     (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\r\n                     [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (chatEnabled) {\r\n      <mat-list-item class=\"nav-menu\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\r\n                     (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\r\n                     [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      @if (enableAnalysis && profile.cubes.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('cube')\"\r\n                     [class.active]=\"activeMenu === 'cube'\"\r\n                     [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\r\n        <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (profile.reports.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('reports')\"\r\n                     [class.active]=\"activeMenu === 'reports'\"\r\n                     [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (isSysAdmin) {\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('admin')\"\r\n                     [class.active]=\"activeMenu === 'admin'\"\r\n                     [bizdocTooltip]=\"'Tools'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\r\n        <mat-icon matListItemIcon>build</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n    </mat-nav-list>\r\n    <span class=\"divider\"></span>\r\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\r\n    <div class=\"sign-in\">\r\n      <button mat-icon-button data-help=\"settings\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\r\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\r\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\r\n      </button>\r\n      @if(canSignOut) {\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button data-help=\"sign-in\" [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- -->\r\n  @if (subMenu) {\r\n  <div class=\"sub-menu\" (mouseleave)=\"collapseSubMenu()\" [@subMenu]=\"subMenuMode\" (@subMenu.done)=\"resize()\">\r\n    @if (subMenu !== 'new') {\r\n    <div class=\"action\">\r\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\r\n    </div>\r\n    }\r\n    @switch (subMenu) {\r\n    @case ('new') {\r\n    <bizdoc-new-menu (change)=\"closeSubMenu()\"></bizdoc-new-menu>\r\n    }\r\n    @case ('mailbox') {\r\n    <bizdoc-folders-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-folders-menu>\r\n    }\r\n    @case ('admin') {\r\n    <bizdoc-admin-menu [collapsed]=\"subMenuMode === 'shrink'\"></bizdoc-admin-menu>\r\n    }\r\n    @case ('reports') {\r\n    <bizdoc-reports-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-reports-menu>\r\n    }\r\n    @case ('cube') {\r\n    <bizdoc-cube-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-cube-menu>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n  @if (isDialogMode) {\r\n  <div class=\"backdrop\"></div>\r\n  }\r\n</div>\r\n<div class=\"main\">\r\n  <!-- title -->\r\n  <div class=\"row header\" [@title]=\"main.titleVariant\">\r\n    <h1>\r\n      @if (main.swap) {\r\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      }\r\n      @for (p of main.panes; track p.id; let first = $first) {\r\n      @if (!first) {\r\n      <span class=\"breadcrumbs\">\\</span>\r\n      }\r\n      {{p.title}}\r\n      }\r\n      @if (guide) {\r\n      <button mat-icon-button (click)=\"openGuide(guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n      }\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <!--search-->\r\n    <input type=\"text\"\r\n           [@search]=\"searching\"\r\n           (@search.done)=\"searching && focus()\"\r\n           #input\r\n           (keydown.escape)=\"collapse($event)\"\r\n           [attr.aria-label]=\"'Search'|translate\"\r\n           [formControl]=\"search\"\r\n           [matAutocomplete]=\"auto\" class=\"search-box\">\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\r\n      @for (o of results | async; track o) {\r\n      <mat-option [value]=\"o\">\r\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\r\n    <!--notifications-->\r\n    <button mat-icon-button (click)=\"openNotifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\r\n            [attr.aria-label]=\"'Notifications'| translate\"\r\n            data-help=\"notifications\">\r\n      <mat-icon [matBadge]=\"profile.messagesCount\" [matBadgeHidden]=\"!profile.messagesCount\"\r\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\r\n                [class.filled]=\"profile.messagesCount\">\r\n        {{profile.options.notifications?.active === true ? 'notifications':'notifications_off'}}\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <!--panes & tabs-->\r\n  <bizdoc-panes-outlet (dialogChange)=\"isDialogMode = $event\" #main></bizdoc-panes-outlet>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{z-index:1}.nav-menu .sub-menu{min-width:210px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-menu{padding:0}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex:1;overflow-x:hidden;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.main .header{margin:4px 4px 0 0;align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: 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.MatListItemIcon, selector: "[matListItemIcon]" }, { 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: 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: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: AdminMenuComponent, selector: "bizdoc-admin-menu", inputs: ["collapsed"] }, { kind: "component", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: ["dialogChange"] }, { kind: "component", type: CubeMenuComponent, selector: "bizdoc-cube-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ReportsMenuComponent, selector: "bizdoc-reports-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: FoldersMenuComponent, selector: "bizdoc-folders-menu", inputs: ["collapsed"], outputs: ["change"] }, { kind: "component", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: ["change"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [subMenuAnimation, panesTitleAnimation, searchAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HomeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-home', host: { class: 'mat-app-background' }, animations: [subMenuAnimation, panesTitleAnimation, searchAnimation], template: "<!-- menu -->\r\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"subMenu\"\r\n     [class.dialog]=\"isDialogMode\"\r\n     class=\"nav-menu row\">\r\n\r\n  <div class=\"column\">\r\n    <!--@if(appLogo){\r\n    <img [src]=\"appLogo\" class=\"app-logo\" />\r\n    }-->\r\n    @if (forms.length) {\r\n    <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\r\n      <button mat-raised-button\r\n              [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n              (click)=\"openNew()\" [disabled]=\"creating\"\r\n              [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\r\n        <mat-icon>add</mat-icon>\r\n        <span class=\"nav-label\">{{'Compose'| translate}}</span>\r\n      </button>\r\n    </div>\r\n    }\r\n    <mat-nav-list>\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Dashboard' | translate\"\r\n                     (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\r\n                     data-help=\"dashboard\"\r\n                     [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openMailbox()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     [class.active]=\"activeMenu === 'mailbox'\"\r\n                     [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"!profile.inboxCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\r\n      </mat-list-item>\r\n      @if (schedulerEnabled) {\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Scheduler' | translate\"\r\n                     (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\r\n                     [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (chatEnabled) {\r\n      <mat-list-item class=\"nav-menu\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\r\n                     (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\r\n                     [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      @if (enableAnalysis && profile.cubes.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('cube')\"\r\n                     [class.active]=\"activeMenu === 'cube'\"\r\n                     [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\r\n        <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (profile.reports.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('reports')\"\r\n                     [class.active]=\"activeMenu === 'reports'\"\r\n                     [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (isSysAdmin) {\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('admin')\"\r\n                     [class.active]=\"activeMenu === 'admin'\"\r\n                     [bizdocTooltip]=\"'System'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\r\n        <mat-icon matListItemIcon>device_hub</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n    </mat-nav-list>\r\n    <span class=\"divider\"></span>\r\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\r\n    <div class=\"sign-in\">\r\n      <button mat-icon-button data-help=\"settings\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\r\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\r\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\r\n      </button>\r\n      @if(canSignOut) {\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button data-help=\"sign-in\" [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- -->\r\n  @if (subMenu) {\r\n  <div class=\"sub-menu\" (mouseleave)=\"collapseSubMenu()\" [@subMenu]=\"subMenuMode\" (@subMenu.done)=\"resize()\">\r\n    @if (subMenu !== 'new') {\r\n    <div class=\"action\">\r\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\r\n    </div>\r\n    }\r\n    @switch (subMenu) {\r\n    @case ('new') {\r\n    <bizdoc-new-menu (change)=\"closeSubMenu()\"></bizdoc-new-menu>\r\n    }\r\n    @case ('mailbox') {\r\n    <bizdoc-folders-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-folders-menu>\r\n    }\r\n    @case ('admin') {\r\n    <bizdoc-admin-menu [collapsed]=\"subMenuMode === 'shrink'\"></bizdoc-admin-menu>\r\n    }\r\n    @case ('reports') {\r\n    <bizdoc-reports-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-reports-menu>\r\n    }\r\n    @case ('cube') {\r\n    <bizdoc-cube-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-cube-menu>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n  @if (isDialogMode) {\r\n  <div class=\"backdrop\"></div>\r\n  }\r\n</div>\r\n<div class=\"main\">\r\n  <!-- title -->\r\n  <div class=\"row header\" [@title]=\"main.titleVariant\">\r\n    <h1>\r\n      @if (main.swap) {\r\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      }\r\n      @for (p of main.panes; track p.id; let first = $first) {\r\n      @if (!first) {\r\n      <span class=\"breadcrumbs\">\\</span>\r\n      }\r\n      {{p.title}}\r\n      }\r\n      @if (guide) {\r\n      <button mat-icon-button (click)=\"openGuide(guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n      }\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <!--search-->\r\n    <input type=\"text\"\r\n           [@search]=\"searching\"\r\n           (@search.done)=\"searching && focus()\"\r\n           #input\r\n           (keydown.escape)=\"collapse($event)\"\r\n           [attr.aria-label]=\"'Search'|translate\"\r\n           [formControl]=\"search\"\r\n           [matAutocomplete]=\"auto\" class=\"search-box\">\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\r\n      @for (o of results | async; track o) {\r\n      <mat-option [value]=\"o\">\r\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\r\n    <!--notifications-->\r\n    <button mat-icon-button (click)=\"openNotifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\r\n            [attr.aria-label]=\"'Notifications'| translate\"\r\n            data-help=\"notifications\">\r\n      <mat-icon [matBadge]=\"profile.messagesCount\" [matBadgeHidden]=\"!profile.messagesCount\"\r\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\r\n                [class.filled]=\"profile.messagesCount\">\r\n        {{profile.options.notifications?.active === true ? 'notifications':'notifications_off'}}\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <!--panes & tabs-->\r\n  <bizdoc-panes-outlet (dialogChange)=\"isDialogMode = $event\" #main></bizdoc-panes-outlet>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{z-index:1}.nav-menu .sub-menu{min-width:210px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-menu{padding:0}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex:1;overflow-x:hidden;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.main .header{margin:4px 4px 0 0;align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-home', host: { class: 'mat-app-background' }, animations: [subMenuAnimation, panesTitleAnimation, searchAnimation], template: "<!-- menu -->\r\n<div [class.nav-collapsed]=\"collapsed\" [class.nav-open]=\"subMenu\"\r\n     [class.dialog]=\"isDialogMode\"\r\n     class=\"nav-menu row\">\r\n\r\n  <div class=\"column\">\r\n    <!--@if(appLogo){\r\n    <img [src]=\"appLogo\" class=\"app-logo\" />\r\n    }-->\r\n    @if (forms.length) {\r\n    <div [class.active]=\"activeMenu === 'new'\" class=\"new-container\">\r\n      <button mat-raised-button\r\n              [bizdocTooltip]=\"'Compose'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n              (click)=\"openNew()\" [disabled]=\"creating\"\r\n              [attr.aria-label]=\"'Compose'| translate\" color=\"primary\" data-help=\"compose\">\r\n        <mat-icon>add</mat-icon>\r\n        <span class=\"nav-label\">{{'Compose'| translate}}</span>\r\n      </button>\r\n    </div>\r\n    }\r\n    <mat-nav-list>\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Dashboard' | translate\"\r\n                     (click)=\"nav('dashboard')\" [class.active]=\"activeMenu === 'dashboard'\"\r\n                     data-help=\"dashboard\"\r\n                     [bizdocTooltip]=\"'Dashboard'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon>apps</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openMailbox()\" [bizdocTooltip]=\"'Mailbox'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     [class.active]=\"activeMenu === 'mailbox'\"\r\n                     [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.inboxCount\" [matBadgeHidden]=\"!profile.inboxCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">inbox</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Mailbox' | translate}}</span>\r\n      </mat-list-item>\r\n      @if (schedulerEnabled) {\r\n      <mat-list-item class=\"nav-menu\" [attr.aria-label]=\"'Scheduler' | translate\"\r\n                     (click)=\"nav('schedule')\" [class.active]=\"activeMenu === 'schedule'\"\r\n                     [bizdocTooltip]=\"'Scheduler'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span class=\"nav-label\" matListItemTitle>{{ 'Scheduler' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (chatEnabled) {\r\n      <mat-list-item class=\"nav-menu\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\"\r\n                     (click)=\"nav('contacts')\" [class.active]=\"activeMenu === 'contacts'\"\r\n                     [bizdocTooltip]=\"'Chat'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\">\r\n        <mat-icon matListItemIcon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\">chat</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{ 'Chat' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      @if (enableAnalysis && profile.cubes.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('cube')\"\r\n                     [class.active]=\"activeMenu === 'cube'\"\r\n                     [bizdocTooltip]=\"'Cube'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\"\r\n                     data-help=\"cube\" [attr.aria-label]=\"'Cube' | translate\">\r\n        <mat-icon matListItemIcon>equalizer</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Cube' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (profile.reports.length) {\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('reports')\"\r\n                     [class.active]=\"activeMenu === 'reports'\"\r\n                     [bizdocTooltip]=\"'Reports'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" data-help=\"reports\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-icon matListItemIcon>list_alt</mat-icon><span class=\"nav-label\" matListItemTitle>{{'Reports' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n      @if (isSysAdmin) {\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item class=\"nav-menu\" (click)=\"openSubMenu('admin')\"\r\n                     [class.active]=\"activeMenu === 'admin'\"\r\n                     [bizdocTooltip]=\"'Tools'|translate\" bizdocTooltipPosition=\"end\" [bizdocTooltipDisabled]=\"!collapsed\" [attr.aria-label]=\"'System' | translate\">\r\n        <mat-icon matListItemIcon>build</mat-icon>\r\n        <span class=\"nav-label\" matListItemTitle>{{'Workflow' | translate}}</span>\r\n      </mat-list-item>\r\n      }\r\n    </mat-nav-list>\r\n    <span class=\"divider\"></span>\r\n    <!--<lottie name=\"lf30_editor_qr7zgmcs\" *ngIf=\"loading\"></lottie>-->\r\n    <div class=\"sign-in\">\r\n      <button mat-icon-button data-help=\"settings\" [bizdocTooltip]=\"'Settings' | translate\" bizdocTooltipPosition=\"above\"\r\n              [attr.aria-label]=\"'Settings' | translate\" (click)=\"options($event)\">\r\n        <mat-icon matAnimate=\"rotate\">settingson</mat-icon>\r\n      </button>\r\n      @if(canSignOut) {\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button data-help=\"sign-in\" [attr.aria-label]=\"'Power' | translate\" (click)=\"signout($event)\" [bizdocTooltip]=\"'Exit'|translate\" bizdocTooltipPosition=\"above\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">logout</mat-icon>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- -->\r\n  @if (subMenu) {\r\n  <div class=\"sub-menu\" (mouseleave)=\"collapseSubMenu()\" [@subMenu]=\"subMenuMode\" (@subMenu.done)=\"resize()\">\r\n    @if (subMenu !== 'new') {\r\n    <div class=\"action\">\r\n      <button mat-icon-button (click)=\"togglePinned()\" [bizdocTooltip]=\"(pinned?'Collapse':'Expand')|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">{{pinned ? 'push_pin' : 'menu'}}</mat-icon></button>\r\n    </div>\r\n    }\r\n    @switch (subMenu) {\r\n    @case ('new') {\r\n    <bizdoc-new-menu (change)=\"closeSubMenu()\"></bizdoc-new-menu>\r\n    }\r\n    @case ('mailbox') {\r\n    <bizdoc-folders-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-folders-menu>\r\n    }\r\n    @case ('admin') {\r\n    <bizdoc-admin-menu [collapsed]=\"subMenuMode === 'shrink'\"></bizdoc-admin-menu>\r\n    }\r\n    @case ('reports') {\r\n    <bizdoc-reports-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-reports-menu>\r\n    }\r\n    @case ('cube') {\r\n    <bizdoc-cube-menu [collapsed]=\"subMenuMode === 'shrink'\" (change)=\"collapseSubMenu()\"></bizdoc-cube-menu>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n  @if (isDialogMode) {\r\n  <div class=\"backdrop\"></div>\r\n  }\r\n</div>\r\n<div class=\"main\">\r\n  <!-- title -->\r\n  <div class=\"row header\" [@title]=\"main.titleVariant\">\r\n    <h1>\r\n      @if (main.swap) {\r\n      <button mat-icon-button (click)=\"main.back()\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      }\r\n      @for (p of main.panes; track p.id; let first = $first) {\r\n      @if (!first) {\r\n      <span class=\"breadcrumbs\">\\</span>\r\n      }\r\n      {{p.title}}\r\n      }\r\n      @if (guide) {\r\n      <button mat-icon-button (click)=\"openGuide(guide)\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n      }\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <!--search-->\r\n    <input type=\"text\"\r\n           [@search]=\"searching\"\r\n           (@search.done)=\"searching && focus()\"\r\n           #input\r\n           (keydown.escape)=\"collapse($event)\"\r\n           [attr.aria-label]=\"'Search'|translate\"\r\n           [formControl]=\"search\"\r\n           [matAutocomplete]=\"auto\" class=\"search-box\">\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"goto($event)\" [displayWith]=\"displayWith\">\r\n      @for (o of results | async; track o) {\r\n      <mat-option [value]=\"o\">\r\n        <ng-container (attached)=\"onAttached(o, $event)\" [cdkPortalOutlet]=\"o.portal\"></ng-container>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    <button mat-icon-button (click)=\"toggle($event)\" [bizdocTooltip]=\"'Search'|translate\" class=\"tool\"><mat-icon>search</mat-icon></button>\r\n    <!--notifications-->\r\n    <button mat-icon-button (click)=\"openNotifs($event)\" [bizdocTooltip]=\"'Notifications'|translate\" bizdocTooltipPosition=\"start\" class=\"tool\"\r\n            [attr.aria-label]=\"'Notifications'| translate\"\r\n            data-help=\"notifications\">\r\n      <mat-icon [matBadge]=\"profile.messagesCount\" [matBadgeHidden]=\"!profile.messagesCount\"\r\n                matBadgeColor=\"accent\" aria-hidden=\"false\"\r\n                [class.filled]=\"profile.messagesCount\">\r\n        {{profile.options.notifications?.active === true ? 'notifications':'notifications_off'}}\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <!--panes & tabs-->\r\n  <bizdoc-panes-outlet (dialogChange)=\"isDialogMode = $event\" #main></bizdoc-panes-outlet>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}::ng-deep .nav-collapsed .mdc-list-item{padding-right:0}::ng-deep [dir=rtl] .nav-collapsed .mdc-list-item{padding-left:0}.nav-menu{z-index:1}.nav-menu .sub-menu{min-width:210px;display:block;z-index:1;overflow-x:hidden;align-self:stretch}.nav-menu .sub-menu .action{display:flex;-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.nav-menu .new-container{margin:8px 8px 0;text-align:center}.nav-menu .new-container button{min-width:35px;padding:0 14px;height:40px}.nav-menu .new-container button .mat-icon{margin-right:2px;margin-left:2px}.nav-menu .nav-icon{display:none}.nav-menu.nav-collapsed .nav-menu{padding:0}.nav-menu.nav-collapsed .nav-icon{display:unset}.nav-menu.nav-collapsed .nav-label{display:none}.nav-menu.nav-collapsed .sign-in{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;align-items:center}.nav-menu .sign-in{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;margin-bottom:5px;align-items:baseline}.backdrop{position:absolute;z-index:200;width:100%;height:100%;display:block;background:#424242;opacity:.8}.main{flex:1;overflow-x:hidden;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.main .header{margin:4px 4px 0 0;align-items:center;min-width:max-content}.main .header h1{font-size:xx-large;margin:12px;font-weight:100}.main .header h1 button{vertical-align:middle}.main .header h1 .breadcrumbs{font-size:smaller}.main .header .search-box{font-size:large}\n"] }]
         }], ctorParameters: () => [{ type: PanesRouter }, { type: SearchService }, { type: DocumentFactory }, { type: Popup }, { type: GuideService }, { type: AuthenticationImpl }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -22053,7 +22066,7 @@ const PANES_CONFIG = [
                         ]
                     }, {
                         path: 'trace',
-                        icon: 'timeline',
+                        icon: 'network_node',
                         component: TracePaneComponent,
                         policy: OpenPolicy.Tab | OpenPolicy.Expandable
                     }, {
@@ -22077,7 +22090,7 @@ const PANES_CONFIG = [
                         policy: OpenPolicy.Tab | OpenPolicy.Expandable
                     }, {
                         path: 'trace',
-                        icon: 'timeline',
+                        icon: 'network_node',
                         component: TracePaneComponent,
                         policy: OpenPolicy.Tab | OpenPolicy.Expandable
                     }, {