@bizdoc/core 3.8.10 → 3.9.2

package/fesm2022/bizdoc-core.mjs

@@ -1184,22 +1184,16 @@ class SessionService {
             this._stepNotificationsCount(move);
     }
     _stepNotificationsCount(move) {
-        let { messagesCount } = this._profile;
-        if (move === 0)
-            messagesCount = 0;
-        else
-            messagesCount = (messagesCount || 0) + move;
-        this._profile.messagesCount = messagesCount;
-        this._messagesCount$.next(messagesCount);
+        let { messagesCount: counter } = this._profile;
+        counter = promote(move, counter);
+        this._profile.messagesCount = counter;
+        this._messagesCount$.next(counter);
     }
     _stepInboxCount(move) {
-        let { inboxCount } = this._profile;
-        if (move === 0)
-            inboxCount = 0;
-        else
-            inboxCount = (inboxCount || 0) + move;
-        this._profile.inboxCount = inboxCount;
-        this._inboxCount$.next(inboxCount);
+        let { inboxCount: counter } = this._profile;
+        counter = promote(move, counter);
+        this._profile.inboxCount = counter;
+        this._inboxCount$.next(counter);
     }
     /** */
     get tags() {
@@ -1352,12 +1346,20 @@ class SessionService {
         });
     }
     markInboxAsTouched() {
+        if (this.isImpersonating) {
+            this._stepInboxCount(0);
+            return Promise.resolve();
+        }
         return firstValueFrom(this._http.put('/api/account/inboxview', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
             this._stepInboxCount(0);
             this._profile.options.inboxView = e.time;
         })));
     }
     markNotificationsAsTouched() {
+        if (this.isImpersonating) {
+            this._stepNotificationsCount(0);
+            return Promise.resolve();
+        }
         return firstValueFrom(this._http.put('/api/account/notificationsView', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
             this._stepNotificationsCount(0);
             this._profile.options.notificationsView = e.time;
@@ -1434,6 +1436,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                     type: Inject,
                     args: [BIZDOC_CONFIG]
                 }] }, { type: i1.HttpClient }, { type: i2.CookieService }, { type: HubService }, { type: i7.MatIconRegistry }, { type: i2$1.DomSanitizer }] });
+function promote(move, counter) {
+    switch (move) {
+        case 0:
+            counter = 0;
+            break;
+        case 1:
+            counter += 1;
+            break;
+        case -1:
+            counter = counter ? counter - 1 : 0;
+            break;
+    }
+    return counter;
+}
 function loadServiceWorker() {
     window.addEventListener('load', function () {
         navigator.serviceWorker.register('/js/app-sw.js').then(function () {
@@ -9009,96 +9025,110 @@ class ExpandedItemComponent {
         this._refresh();
         this._refreshTask = setInterval(() => this._refresh(), REFRESH_TIME);
     }
+    /** */
+    async _refresh() {
+        const { actions } = this.model;
+        this.actions = actions && actions.length ? this._session.profile.actions.filter(a => actions.indexOf(a.name) > -1) : undefined;
+        this._sender();
+        this._comments();
+        this.note = await this._note();
+        this._awaiting();
+    }
+    /** */
     async _note() {
-        const { ownerId, ownerById, issued, substituteId, received, replied, log, id, note, byId, action, escalated, originId, draft } = this.model;
-        let target;
-        if (action)
-            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 === action), 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 (byId) {
-                if (byId === this._session.profile.byId) {
+            if (repliedBy) {
+                if (repliedBy === this._session.userId) {
+                    const action = this._actionName(actionId, 'you');
                     if (target)
-                        this.note = this._translate.get('ActionTakenByYouTo', this._actionName(action, '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(action, '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(byId).subscribe(u => {
-                        if (target)
-                            this.note = this._translate.get('YouTakenActionByTo', this._formatUserElement(u), this._actionName(action, u.gender), target, time);
-                        else
-                            this.note = this._translate.get('YouTakenActionBy', this._formatUserElement(u), this._actionName(action, u.gender), time);
-                    });
             }
-            else if (this._session.profile.byId) {
+            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(action, 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(action, 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(action, 'you'), target, time);
+                    return this._translate.get('YouTakenActionTo', action, target, time);
                 else
-                    this.note = this._translate.get('YouTakenAction', this._actionName(action, '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.action), adjective = action.adjective || action.past || action.title;
-            if ((origin.byId || origin.userId) === this._session.userId)
-                this.note = this._translate.get('ActionByYou', adjective);
-            else if (origin.byId) {
+            const action = this._actionName(origin.actionId, 'adjective');
+            if ((origin.repliedBy || origin.userId) === this._session.userId)
+                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.byId));
-                this.note = this._translate.get('ActionByBy', adjective, by.name, who.name);
+                const by = await firstValueFrom(this._accounts.get(origin.repliedBy));
+                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 (ownerById) {
-                if (ownerById === this._session.profile.byId)
-                    this.note = this._translate.personalize('YouSubmittedNoteBy', this._session.profile.byGender, this._session.profile.name, time);
+            if (ownerBy) {
+                if (ownerBy === this._session.userId)
+                    return this._translate.personalize('YouSubmittedNoteBy', profile.byGender, profile.name, time);
                 else {
-                    const by = await firstValueFrom(this._accounts.get(ownerById));
+                    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);
@@ -9106,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();
@@ -9131,18 +9168,30 @@ class ExpandedItemComponent {
         return dayjs.duration(time, 's').humanize();
     }
     /** */
-    async _refresh() {
-        const { actions } = this.model;
-        this.actions = actions && actions.length ? this._session.profile.actions.filter(a => actions.indexOf(a.name) > -1) : undefined;
-        const { senderId } = this.model;
-        // sender
-        if (senderId && (senderId !== this._session.userId)) {
+    async _sender() {
+        const { senderId, senderBy } = this.model;
+        if (!senderId)
+            return;
+        if (senderId === this._session.userId) {
+            if (senderBy) {
+                const by = await firstValueFrom(this._accounts.get(senderBy));
+                this.sender = this._translate.get('YouBy', this._formatUserElement(by));
+            }
+        }
+        else {
             const who = await firstValueFrom(this._accounts.get(senderId));
-            this.sender = this._formatUserElement(who);
+            if (senderBy) {
+                if (senderBy === this._session.profile.byId) {
+                    this.sender = this._translate.get('ByYou', this._formatUserElement(who));
+                }
+                else {
+                    const by = await firstValueFrom(this._accounts.get(senderBy));
+                    this.sender = this._translate.get('By', this._formatUserElement(who), this._formatUserElement(by));
+                }
+            }
+            else
+                this.sender = this._formatUserElement(who);
         }
-        this._comments();
-        this._note();
-        this._awaiting();
     }
     _comments() {
         const { viewed, comments } = this.model;
@@ -9196,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
@@ -9212,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
@@ -9693,7 +9738,7 @@ class BrowseItemsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BrowseItemsComponent, deps: [{ token: MailboxService }, { token: AccountService }, { token: CubeService }, { token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }, { token: RouterImpl }, { token: HubService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: BrowseItemsComponent, isStandalone: false, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onInsights: "insights" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"repliedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.replied | amDateFormat: 'lll'\"> {{item.replied | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$8.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$8.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: BrowseItemsComponent, isStandalone: false, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onInsights: "insights" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerBy\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.senderBy\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"repliedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.replied | amDateFormat: 'lll'\"> {{item.replied | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$8.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$8.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             listAnimation,
             itemAnimation,
             expandListItemAnimation,
@@ -9707,7 +9752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         itemAnimation,
                         expandListItemAnimation,
                         listItemUpdatedAnimation
-                    ], template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"repliedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.replied | amDateFormat: 'lll'\"> {{item.replied | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
+                    ], template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerBy\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.senderBy\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"repliedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.replied | amDateFormat: 'lll'\"> {{item.replied | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: MailboxService }, { type: AccountService }, { type: CubeService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }, { type: RouterImpl }, { type: HubService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -10539,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 }]
@@ -13654,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]
@@ -13786,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;
@@ -13874,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]
@@ -15541,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';
@@ -15623,6 +15669,7 @@ class FlowViewComponent extends TraceBase {
                 snapSettings: this.snapSettings,
                 scrollSettings: this.scrollSettings,
                 height: 560,
+                //  mouseEnter: this._mouseEnter.bind(this),
                 //layers: [
                 //  {
                 //    zIndex: 0,
@@ -15677,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;
@@ -15752,8 +15803,8 @@ class FlowViewComponent extends TraceBase {
                             }]
                     });
                     // add action indicator
-                    if (recipient.action) {
-                        const action = this._session.profile.actions.find(a => a.name === recipient.action);
+                    if (recipient.actionId) {
+                        const action = this._session.profile.actions.find(a => a.name === recipient.actionId);
                         action.shape && !recipient.pending &&
                             indicators.push({
                                 id: id + 'action',
@@ -16032,8 +16083,8 @@ class FlowViewComponent extends TraceBase {
     async _startNode() {
         let note, role;
         const ago = dayjs(this.model.issued).fromNow();
-        if (this.model.ownerById) {
-            if (this.model.ownerById === this._session.userId) {
+        if (this.model.ownerBy) {
+            if (this.model.ownerBy === this._session.userId) {
                 if (this.model.ownerId === this._session.profile.userId)
                     note = this._translate.personalize('YouSubmittedNoteBy', this._session.profile.byGender, this._session.profile.name, ago);
                 else {
@@ -16042,7 +16093,7 @@ class FlowViewComponent extends TraceBase {
                 }
             }
             else {
-                const by = await firstValueFrom(this._accounts.get(this.model.ownerById));
+                const by = await firstValueFrom(this._accounts.get(this.model.ownerBy));
                 if (this.model.ownerId === this._session.userId)
                     note = this._translate.personalize('SubmittedNoteYouBy', by.gender, by.name, ago);
                 else if (this.model.ownerId === this._session.profile.userId)
@@ -16104,9 +16155,9 @@ class FlowViewComponent extends TraceBase {
                     const who = await firstValueFrom(this._accounts.get(sibling.userId));
                     to.push(who.name);
                 }
-            if (recipient.byId) {
-                if (recipient.byId === this._session.profile.byId) {
-                    const action = this._action(recipient.action, this._session.profile.byGender);
+            if (recipient.repliedBy) {
+                if (recipient.repliedBy === this._session.profile.byId) {
+                    const action = this._action(recipient.actionId, this._session.profile.byGender);
                     if (to.length) {
                         if (recipient.userId === this._session.profile.userId)
                             tooltip.note = this._translate.get('ActionTakenByYouTo', action, this._translate.join(to), this._session.profile.name, ago);
@@ -16123,8 +16174,8 @@ class FlowViewComponent extends TraceBase {
                     }
                 }
                 else {
-                    const by = await firstValueFrom(this._accounts.get(recipient.byId));
-                    const action = this._action(recipient.action, by.gender);
+                    const by = await firstValueFrom(this._accounts.get(recipient.repliedBy));
+                    const action = this._action(recipient.actionId, by.gender);
                     if (recipient.userId === this._session.profile.userId) {
                         if (to.length)
                             tooltip.note = this._translate.get('YouTakenActionByTo', by.name, action, this._translate.join(to), ago);
@@ -16142,7 +16193,7 @@ class FlowViewComponent extends TraceBase {
             }
             else if (to.length) {
                 if (recipient.userId === this._session.profile.userId) {
-                    const action = this._action(recipient.action, this._session.profile.gender);
+                    const action = this._action(recipient.actionId, this._session.profile.gender);
                     if (this._session.isImpersonating)
                         tooltip.note = this._translate.get('ActionTakenTo', this._session.profile.name, action, this._translate.join(to), ago);
                     else
@@ -16150,21 +16201,21 @@ class FlowViewComponent extends TraceBase {
                 }
                 else {
                     const who = await firstValueFrom(this._accounts.get(recipient.userId));
-                    const action = this._action(recipient.action, who.gender);
-                    tooltip.note = this._translate.get('ActionTakenTo', who.name, action, this._translate.join(to));
+                    const action = this._action(recipient.actionId, who.gender);
+                    tooltip.note = this._translate.get('ActionTakenTo', who.name, action, this._translate.join(to), ago);
                 }
             }
             else if (this._session.isImpersonating) {
-                const action = this._action(recipient.action, this._session.profile.gender);
+                const action = this._action(recipient.actionId, this._session.profile.gender);
                 tooltip.note = this._translate.get('ActionTaken', this._session.profile.name, action, ago);
             }
             else if (recipient.userId === this._session.profile.userId) {
-                const action = this._action(recipient.action, You);
+                const action = this._action(recipient.actionId, You);
                 tooltip.note = this._translate.get('YouTakenAction', action, ago);
             }
             else {
                 const who = await firstValueFrom(this._accounts.get(recipient.userId));
-                const action = this._action(recipient.action, who.gender);
+                const action = this._action(recipient.actionId, who.gender);
                 tooltip.note = this._translate.get('ActionTaken', who.name, action, ago);
             }
         }
@@ -16190,12 +16241,12 @@ class FlowViewComponent extends TraceBase {
             }
         }
         if (recipient.originId && !recipient.replied) {
-            const origin = this.model.recipients.find(r => r.id === recipient.originId), action = this._session.profile.actions.find(a => a.name === origin.action), adjective = action.adjective || action.past || action.title;
-            if ((origin.byId || origin.userId) === this._session.userId)
+            const origin = this.model.recipients.find(r => r.id === recipient.originId), action = this._session.profile.actions.find(a => a.name === origin.actionId), adjective = action.adjective || action.past || action.title;
+            if ((origin.repliedBy || origin.userId) === this._session.userId)
                 tooltip.substituting = this._translate.get('ActionByYou', adjective);
-            else if (origin.byId) {
+            else if (origin.repliedBy) {
                 const who = await firstValueFrom(this._accounts.get(origin.userId));
-                const by = await firstValueFrom(this._accounts.get(origin.byId));
+                const by = await firstValueFrom(this._accounts.get(origin.repliedBy));
                 tooltip.substituting = this._translate.get('ActionByBy', adjective, by.name, who.name);
             }
             else {
@@ -16244,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: [{
@@ -16253,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
@@ -16411,8 +16462,8 @@ class TraceViewComponent extends TraceBase {
                     step.role = this._roleName(recipient.role);
                 step.fyi = recipient.fyi;
                 if (recipient.substituteId) {
-                    if (recipient.byId) {
-                        if (recipient.byId === this._session.userId) {
+                    if (recipient.repliedBy) {
+                        if (recipient.repliedBy === this._session.userId) {
                             let who = await profileOf(recipient.userId);
                             if (recipient.substituteId === this._session.userId)
                                 step.name = this._translate.get('ByYou', nameOf(who));
@@ -16424,7 +16475,7 @@ class TraceViewComponent extends TraceBase {
                                 step.action = await actionBy(action, You, recipient.id);
                         }
                         else {
-                            let by = await profileOf(recipient.byId), who = await profileOf(recipient.userId), substituting = await profileOf(recipient.substituteId);
+                            let by = await profileOf(recipient.repliedBy), who = await profileOf(recipient.userId), substituting = await profileOf(recipient.substituteId);
                             step.name = this._translate.get('SubstitutingBy', nameOf(who), nameOf(substituting), nameOf(by));
                             if (by.role)
                                 step.role = by.role;
@@ -16453,22 +16504,22 @@ class TraceViewComponent extends TraceBase {
                             step.action = await actionBy(action, who.gender, recipient.id);
                     }
                 }
-                else if (recipient.byId) {
+                else if (recipient.repliedBy) {
                     if (recipient.userId === this._session.userId) {
-                        let by = await profileOf(recipient.byId);
+                        let by = await profileOf(recipient.repliedBy);
                         step.name = this._translate.get('YouBy', nameOf(by));
                         if (action)
                             step.action = await actionBy(action, by.gender, recipient.id);
                     }
                     else {
                         let who = await profileOf(recipient.userId);
-                        if (recipient.byId === this._session.userId) {
+                        if (recipient.repliedBy === this._session.userId) {
                             step.name = this._translate.get('ByYou', nameOf(who));
                             if (action)
                                 step.action = await actionBy(action, You, recipient.id);
                         }
                         else {
-                            let by = await profileOf(recipient.byId);
+                            let by = await profileOf(recipient.repliedBy);
                             step.name = this._translate.get('By', nameOf(who), nameOf(by));
                             if (by.role)
                                 step.role = by.role;
@@ -16528,7 +16579,7 @@ class TraceViewComponent extends TraceBase {
                 fyi: recipient.fyi,
                 estimate: recipient.estimate,
                 pending: recipient.pending,
-                action: recipient.action,
+                action: recipient.actionId,
                 note: recipient.note,
                 type: recipient.estimate ? 'Estimate' : 'Pending',
                 duration: recipient.pending ? dayjs().diff(recipient.received, 's') : null,
@@ -16561,12 +16612,12 @@ class TraceViewComponent extends TraceBase {
                         step.role = who.role;
                 }
             }
-            else if (recipient.byId) {
+            else if (recipient.repliedBy) {
                 let who = await profileOf(recipient.userId);
-                if (recipient.byId === this._session.userId)
+                if (recipient.repliedBy === this._session.userId)
                     step.name = this._translate.get('ByYou', nameOf(who));
                 else {
-                    let by = await profileOf(recipient.byId);
+                    let by = await profileOf(recipient.repliedBy);
                     step.name = this._translate.get('By', nameOf(who), nameOf(by));
                     if (by.role)
                         step.role = by.role;
@@ -19589,10 +19640,11 @@ class HomeBase {
         window.dispatchEvent(new Event('resize'));
     }
     _markInboxAsTouched() {
-        this._session.markInboxAsTouched();
+        this._session.profile.inboxCount &&
+            this._session.markInboxAsTouched();
     }
     _markNotificationsAsTouched(_) {
-        this._session.profile.messages.length &&
+        this._session.profile.messagesCount &&
             this._session.markNotificationsAsTouched();
     }
     _set(name, val) {
@@ -21549,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]
@@ -22014,7 +22066,7 @@ const PANES_CONFIG = [
                         ]
                     }, {
                         path: 'trace',
-                        icon: 'timeline',
+                        icon: 'network_node',
                         component: TracePaneComponent,
                         policy: OpenPolicy.Tab | OpenPolicy.Expandable
                     }, {
@@ -22038,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
                     }, {
@@ -23444,8 +23496,8 @@ class PeopleComponent {
         this._me = session.profile.byId || session.profile.userId;
     }
     ngOnChanges(_) {
-        this._push(this.model.ownerId, this.model.ownerById, this.model.senderId);
-        this.model.recipients.reverse().forEach(r => this._push(r.userId, r.byId, r.substituteId));
+        this._push(this.model.ownerId, this.model.ownerBy, this.model.senderId);
+        this.model.recipients.reverse().forEach(r => this._push(r.userId, r.repliedBy, r.substituteId));
         this._accounts.getAll(this._userIds).subscribe(us => this.people = us);
     }
     _push(...userId) {
@@ -31676,15 +31728,15 @@ class TraceElementComponent {
         }
         if (recipient.substituteId) {
             const substitute = await firstValueFrom(this._accounts.get(recipient.substituteId));
-            if (recipient.byId) {
-                const by = await firstValueFrom(this._accounts.get(recipient.byId));
+            if (recipient.repliedBy) {
+                const by = await firstValueFrom(this._accounts.get(recipient.repliedBy));
                 info.push(this._translate.get('SubstitutingBy', this._chat.format(who), this._chat.format(substitute), this._chat.format(by)));
             }
             else
                 info.push(this._translate.get('Substituting', this._chat.format(who), this._chat.format(substitute)));
         }
-        else if (recipient.byId) {
-            const by = await firstValueFrom(this._accounts.get(recipient.byId));
+        else if (recipient.repliedBy) {
+            const by = await firstValueFrom(this._accounts.get(recipient.repliedBy));
             info.push(this._translate.get('By', this._chat.format(who), this._chat.format(by)));
         }
         else