@bizdoc/core 3.8.9 → 3.9.0

package/fesm2022/bizdoc-core.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Injectable, Pipe, Directive, Component, Injector, ElementRef, HostListener, TemplateRef, ViewContainerRef, ViewChild, Input, Optional, HostBinding, Output, Self, EventEmitter, NgModule, ViewChildren, inject, Host, SkipSelf, ContentChild, ContentChildren, provideAppInitializer } from '@angular/core';
-import { BehaviorSubject, Subject, firstValueFrom, of, forkJoin, filter, map as map$1, merge, takeUntil as takeUntil$1, shareReplay as shareReplay$1, Observable, from, interval, switchMap as switchMap$1, isObservable, catchError as catchError$1, startWith as startWith$1, EMPTY, debounceTime as debounceTime$1 } from 'rxjs';
+import { InjectionToken, Inject, Injectable, Pipe, Directive, Component, Injector, ElementRef, HostListener, TemplateRef, ViewContainerRef, ViewChild, Input, Optional, HostBinding, Output, Self, EventEmitter, NgModule, inject, ViewChildren, Host, SkipSelf, ContentChild, ContentChildren, provideAppInitializer } from '@angular/core';
+import { BehaviorSubject, Subject, firstValueFrom, of, forkJoin, filter, map as map$1, merge, takeUntil as takeUntil$1, shareReplay as shareReplay$1, Observable, from, tap as tap$1, interval, switchMap as switchMap$1, isObservable, catchError as catchError$1, startWith as startWith$1, EMPTY, debounceTime as debounceTime$1 } from 'rxjs';
 import { map, tap, catchError, filter as filter$1, first, shareReplay, startWith, takeUntil, debounceTime, switchMap, take, finalize, delay } from 'rxjs/operators';
 import * as i4 from '@angular/material/chips';
 import { MatChipInput, MatChipsModule, MatChipListbox } from '@angular/material/chips';
@@ -76,7 +76,7 @@ import * as ace from 'ace-builds';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i7$6 from '@angular/cdk/layout';
 import { LayoutModule, Breakpoints } from '@angular/cdk/layout';
-import * as i12 from '@angular/material/core';
+import * as i1$3 from '@angular/material/core';
 import { NativeDateAdapter, MatRippleModule, MatNativeDateModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i6$3 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -1184,20 +1184,16 @@ class SessionService {
             this._stepNotificationsCount(move);
     }
     _stepNotificationsCount(move) {
-        let { messagesCount } = this._profile;
-        if (messagesCount === undefined)
-            messagesCount = 0;
-        messagesCount += 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 (inboxCount === undefined)
-            inboxCount = 0;
-        inboxCount += 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() {
@@ -1350,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;
@@ -1432,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 () {
@@ -9007,15 +9025,25 @@ 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();
+        this._awaiting();
+    }
+    /** */
     async _note() {
-        const { ownerId, ownerById, issued, substituteId, received, replied, log, id, note, byId, action, escalated, originId, draft } = this.model;
+        const { ownerId, ownerBy, issued, substituteId, received, replied, log, id, note, repliedBy, actionId, escalated, originId, draft } = this.model;
         let target;
-        if (action)
+        if (actionId)
             target = await this._target(id);
         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), aaction = this._session.profile.actions.find(a => a.name === actionId), adjective = (aaction.adjective || aaction.title).toLowerCase();
                 if (target)
                     this.note = this._translate.personalize('YouSubstituteActionTakenTo', substituting.gender, adjective, target, this._formatUserElement(substituting), time);
                 else
@@ -9032,44 +9060,44 @@ class ExpandedItemComponent {
         }
         else if (replied) {
             const time = this._fromNow(replied);
-            if (byId) {
-                if (byId === this._session.profile.byId) {
+            if (repliedBy) {
+                if (repliedBy === this._session.userId) {
                     if (target)
-                        this.note = this._translate.get('ActionTakenByYouTo', this._actionName(action, 'you'), target, this._session.profile.name, time);
+                        this.note = this._translate.get('ActionTakenByYouTo', this._actionName(actionId, 'you'), target, this._session.profile.name, time);
                     else
-                        this.note = this._translate.get('ActionTakenByYou', this._actionName(action, 'you'), this._session.profile.name, time);
+                        this.note = this._translate.get('ActionTakenByYou', this._actionName(actionId, 'you'), this._session.profile.name, time);
                 }
                 else
-                    this._accounts.get(byId).subscribe(u => {
+                    this._accounts.get(repliedBy).subscribe(u => {
                         if (target)
-                            this.note = this._translate.get('YouTakenActionByTo', this._formatUserElement(u), this._actionName(action, u.gender), target, time);
+                            this.note = this._translate.get('YouTakenActionByTo', this._formatUserElement(u), this._actionName(actionId, u.gender), target, time);
                         else
-                            this.note = this._translate.get('YouTakenActionBy', this._formatUserElement(u), this._actionName(action, u.gender), time);
+                            this.note = this._translate.get('YouTakenActionBy', this._formatUserElement(u), this._actionName(actionId, u.gender), time);
                     });
             }
-            else if (this._session.profile.byId) {
+            else if (this._session.userId) {
                 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);
+                    this.note = this._translate.personalize('ActionTakenTo', this._session.profile.gender, this._session.profile.name, this._actionName(actionId, this._session.profile.gender), 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);
+                    this.note = this._translate.personalize('ActionTaken', this._session.profile.gender, this._session.profile.name, this._actionName(actionId, this._session.profile.gender), time);
             }
             else {
                 if (target)
-                    this.note = this._translate.get('YouTakenActionTo', this._actionName(action, 'you'), target, time);
+                    this.note = this._translate.get('YouTakenActionTo', this._actionName(actionId, 'you'), target, time);
                 else
-                    this.note = this._translate.get('YouTakenAction', this._actionName(action, 'you'), time);
+                    this.note = this._translate.get('YouTakenAction', this._actionName(actionId, 'you'), time);
             }
         }
         else if (note)
             this.note = 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)
+            const 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)
                 this.note = 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));
                 this.note = this._translate.get('ActionByBy', adjective, by.name, who.name);
             }
             else {
@@ -9079,11 +9107,11 @@ class ExpandedItemComponent {
         }
         else if (ownerId === this._session.userId && !draft) {
             const time = this._fromNow(issued);
-            if (ownerById) {
-                if (ownerById === this._session.profile.byId)
+            if (ownerBy) {
+                if (ownerBy === this._session.userId)
                     this.note = this._translate.personalize('YouSubmittedNoteBy', this._session.profile.byGender, this._session.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);
                     else
@@ -9129,18 +9157,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;
@@ -9428,9 +9468,11 @@ class BrowseItemsComponent {
         this._loading$.next(true);
         return this._mailbox.findAll({
             ...this.filters,
-            folderId: this.folderId,
-            type: this.filterType
-        }, { take: TAKE }).
+            folderId: this.folderId
+        }, {
+            type: this.filterType,
+            take: TAKE
+        }).
             pipe(finalize(() => this._loading$.next(false))).
             subscribe({
             next: r => {
@@ -9689,7 +9731,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: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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,
@@ -9703,7 +9745,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]
@@ -12788,6 +12830,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 class TaggingComponentBase {
     constructor() {
         this.selected = new EventEmitter();
+        this._overlayRef = inject(OverlayRef);
+    }
+    get items() { return this._items; }
+    set items(val) {
+        this._items = val.pipe(tap$1(e => !e.length && this._overlayRef.detach()));
     }
     ngAfterViewInit() {
         this.keyManager = new ActiveDescendantKeyManager(this.options).
@@ -12916,26 +12963,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
             }] } });
 
 class UserTaggingComponent extends TaggingComponentBase {
-    constructor(_session, _accounts) {
-        super();
-        this._session = _session;
-        this._accounts = _accounts;
+    constructor() {
+        super(...arguments);
+        this._session = inject(SessionService);
+        this._accounts = inject(AccountService);
         this._me = this._session.userId;
     }
-    nice(name) {
-        return name.split(/\s+|\-/).map(p => p.charAt(0).toUpperCase() + p.substring(1)).join('');
-    }
     onBind(value) {
-        this.items = this._accounts.findAll(value, { take: 8 }).
+        this.items = this._accounts.findAll(value, { take: 9 }).
             pipe(map(u => u.filter(u => u.id !== this._me)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: UserTaggingComponent, deps: [{ token: SessionService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: UserTaggingComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div role=\"listbox\" cdkTrapFocus class=\"tag-list\">\r\n  @for (item of items | async; track item.id) {\r\n    <bizdoc-tag-item [key]='nice(item.name)' [value]='item.id'\r\n      matRipple [attr.aria-label]='item.name'>\r\n      <div class=\"row\">\r\n        <bizdoc-avatar [person]=item dense></bizdoc-avatar>\r\n        &nbsp;\r\n        <div class=\"column\">\r\n          <span>{{item.name}}</span>\r\n          <span>{{item.email}}</span>\r\n        </div>\r\n      </div>\r\n    </bizdoc-tag-item>\r\n  }\r\n</div>\r\n", styles: [".tag-list{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.tag-item{cursor:pointer;padding:8px}.tag-item .row{align-items:center}.tag-item.active{background:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: AvatarComponent, selector: "bizdoc-avatar", inputs: ["person", "showMode", "dense"], outputs: ["clickChange"] }, { kind: "component", type: TaggingItemDirective, selector: "bizdoc-tag-item", inputs: ["key", "value"], outputs: ["selected"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: UserTaggingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: UserTaggingComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div role=\"listbox\" cdkTrapFocus class=\"tag-list\">\r\n  @for (item of items | async; track item.id) {\r\n    <bizdoc-tag-item [key]='item.name' [value]='item.id'\r\n      matRipple [attr.aria-label]='item.name'>\r\n      <div class=\"row\">\r\n        <bizdoc-avatar [person]=item dense></bizdoc-avatar>\r\n        &nbsp;\r\n        <div class=\"column\">\r\n          <span>{{item.name}}</span>\r\n          <span>{{item.email}}</span>\r\n        </div>\r\n      </div>\r\n    </bizdoc-tag-item>\r\n  }\r\n</div>\r\n", styles: [".tag-list{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.tag-item{cursor:pointer;padding:8px}.tag-item .row{align-items:center}.tag-item.active{background:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: AvatarComponent, selector: "bizdoc-avatar", inputs: ["person", "showMode", "dense"], outputs: ["clickChange"] }, { kind: "component", type: TaggingItemDirective, selector: "bizdoc-tag-item", inputs: ["key", "value"], outputs: ["selected"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: UserTaggingComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<div role=\"listbox\" cdkTrapFocus class=\"tag-list\">\r\n  @for (item of items | async; track item.id) {\r\n    <bizdoc-tag-item [key]='nice(item.name)' [value]='item.id'\r\n      matRipple [attr.aria-label]='item.name'>\r\n      <div class=\"row\">\r\n        <bizdoc-avatar [person]=item dense></bizdoc-avatar>\r\n        &nbsp;\r\n        <div class=\"column\">\r\n          <span>{{item.name}}</span>\r\n          <span>{{item.email}}</span>\r\n        </div>\r\n      </div>\r\n    </bizdoc-tag-item>\r\n  }\r\n</div>\r\n", styles: [".tag-list{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.tag-item{cursor:pointer;padding:8px}.tag-item .row{align-items:center}.tag-item.active{background:#d3d3d3}\n"] }]
-        }], ctorParameters: () => [{ type: SessionService }, { type: AccountService }] });
+            args: [{ standalone: false, template: "<div role=\"listbox\" cdkTrapFocus class=\"tag-list\">\r\n  @for (item of items | async; track item.id) {\r\n    <bizdoc-tag-item [key]='item.name' [value]='item.id'\r\n      matRipple [attr.aria-label]='item.name'>\r\n      <div class=\"row\">\r\n        <bizdoc-avatar [person]=item dense></bizdoc-avatar>\r\n        &nbsp;\r\n        <div class=\"column\">\r\n          <span>{{item.name}}</span>\r\n          <span>{{item.email}}</span>\r\n        </div>\r\n      </div>\r\n    </bizdoc-tag-item>\r\n  }\r\n</div>\r\n", styles: [".tag-list{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.tag-item{cursor:pointer;padding:8px}.tag-item .row{align-items:center}.tag-item.active{background:#d3d3d3}\n"] }]
+        }] });
 
 class FormPipe {
     transform(value, ...args) {
@@ -12963,20 +13007,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         }], ctorParameters: () => [{ type: SessionService }] });
 
 class DocumentTaggingComponent extends TaggingComponentBase {
-    constructor(_mailbox) {
-        super();
-        this._mailbox = _mailbox;
+    constructor() {
+        super(...arguments);
+        this._mailbox = inject(MailboxService);
     }
-    onBind(value) {
-        this.items = this._mailbox.findAll({ contains: value }, { take: 8 });
+    onBind(contains) {
+        this.items = this._mailbox.findAll({ contains, }, { type: contains ? null : 'recent', take: 9 }).pipe(
+        // distict documents 
+        map(e => e.filter((m, i) => e.findIndex(e => e.documentId === m.documentId) === i)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DocumentTaggingComponent, deps: [{ token: MailboxService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DocumentTaggingComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div role=\"listbox\" cdkTrapFocus class=\"tag-list\">\r\n  @for (item of items | async; track item) {\r\n    <bizdoc-tag-item [key]='item.number' [value]='item.documentId' [attr.aria-label]='item.number' matRipple>\r\n      <div class=\"row\">\r\n        <mat-icon>{{item.formId | form : 'icon' }}</mat-icon>\r\n        &nbsp;\r\n        <div class=\"column\">\r\n          <span>{{item.number}}</span>\r\n        </div>\r\n      </div>\r\n    </bizdoc-tag-item>\r\n  }\r\n</div>\r\n", styles: [".tag-list{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.tag-item{cursor:pointer;padding:8px}.tag-item .row{align-items:center}.tag-item.active{background:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TaggingItemDirective, selector: "bizdoc-tag-item", inputs: ["key", "value"], outputs: ["selected"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: FormPipe, name: "form" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DocumentTaggingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DocumentTaggingComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div role=\"listbox\" cdkTrapFocus class=\"tag-list\">\r\n  @for (item of items | async; track item) {\r\n    <bizdoc-tag-item [key]='item.number' [value]='item.documentId' [attr.aria-label]='item.number' matRipple>\r\n      <div class=\"row\">\r\n        <mat-icon>{{item.formId | form : 'icon' }}</mat-icon>\r\n        &nbsp;\r\n        <div class=\"column\">\r\n          <span>{{item.number}}</span>\r\n        </div>\r\n      </div>\r\n    </bizdoc-tag-item>\r\n  }\r\n</div>\r\n", styles: [".tag-list{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.tag-item{cursor:pointer;padding:8px}.tag-item .row{align-items:center}.tag-item.active{background:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TaggingItemDirective, selector: "bizdoc-tag-item", inputs: ["key", "value"], outputs: ["selected"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: FormPipe, name: "form" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DocumentTaggingComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, template: "<div role=\"listbox\" cdkTrapFocus class=\"tag-list\">\r\n  @for (item of items | async; track item) {\r\n    <bizdoc-tag-item [key]='item.number' [value]='item.documentId' [attr.aria-label]='item.number' matRipple>\r\n      <div class=\"row\">\r\n        <mat-icon>{{item.formId | form : 'icon' }}</mat-icon>\r\n        &nbsp;\r\n        <div class=\"column\">\r\n          <span>{{item.number}}</span>\r\n        </div>\r\n      </div>\r\n    </bizdoc-tag-item>\r\n  }\r\n</div>\r\n", styles: [".tag-list{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.tag-item{cursor:pointer;padding:8px}.tag-item .row{align-items:center}.tag-item.active{background:#d3d3d3}\n"] }]
-        }], ctorParameters: () => [{ type: MailboxService }] });
+        }] });
 
 class EmojiHostComponent {
     constructor(_ref, _session, _translate) {
@@ -13083,7 +13129,12 @@ class TaggingDirective {
             direction: this._dir.value,
             backdropClass: 'cdk-overlay-transparent-backdrop'
         });
-        const compRef = this._overlayRef.attach(new ComponentPortal(comp, null, Injector.create({ providers: [] })));
+        const compRef = this._overlayRef.attach(new ComponentPortal(comp, null, Injector.create({
+            providers: [{
+                    provide: OverlayRef,
+                    useValue: this._overlayRef
+                }]
+        })));
         this._instance = compRef.instance;
         this._instance.onBind(value);
         this._instance.selected.subscribe(e => this._select(e.key, e.value));
@@ -13542,8 +13593,8 @@ class CommentComponent {
         const whos = [this.item.userId === me ? you : this._accounts.get(this.item.userId)];
         if (this.item.byId)
             whos.push(this.item.byId === me ? you : this._accounts.get(this.item.byId));
-        if (this.item.parentId) {
-            const parent = this.model.comments.find(c => c.id == this.item.parentId), who = parent.byId || parent.userId;
+        if (this.item.reply) {
+            const { id, byId, userId } = this.item.reply, who = byId || userId;
             whos.push(who == me ? you : this._accounts.get(who));
         }
         forkJoin(whos).subscribe(this._name.bind(this));
@@ -13552,29 +13603,23 @@ class CommentComponent {
         if (users[0] === 'you')
             this.name = this._translate.get('You');
         else
-            this.name = this._formatUserElement(users[0]);
+            this.name = this._chat.format(users[0]);
         if (this.item.byId) {
             if (users[1] === 'you')
                 this.name = this._translate.get('ByYou', this.name);
             else
-                this.name = this._translate.get('By', this.name, this._formatUserElement(users[1]));
+                this.name = this._translate.get('By', this.name, this._chat.format(users[1]));
         }
-        if (this.item.parentId) {
+        if (this.item.reply) {
             const who = users[2] || users[1];
             if (who === 'you')
                 this.name = this._translate.get('ReplyingToYou', this.name);
             else if (users[0] === 'you')
-                this.name = this._translate.get('YouRepliedTo', this._formatUserElement(who));
+                this.name = this._translate.get('YouRepliedTo', this._chat.format(who));
             else
-                this.name = this._translate.get('ReplyingTo', this.name, this._formatUserElement(who));
+                this.name = this._translate.get('ReplyingTo', this.name, this._chat.format(who));
         }
     }
-    _formatUserElement(person) {
-        if (this._config.chat !== false)
-            return this._chat.format(person);
-        else
-            return person.nick || person.name;
-    }
     /**
      * Chat
      * @param e
@@ -13647,13 +13692,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\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small class=\"flex\" [bizdocTooltip]=\"item.edited || item.time | amDateFormat: 'lll'\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i2$3.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: 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 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" }] }); }
 }
 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\"></div>\r\n    @if (item.image) {\r\n    <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" (click)=\"preview()\" />\r\n    }\r\n  </div>\r\n  @if (me) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"tool\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\r\n  }\r\n  <mat-menu #menu>\r\n    <ng-template matMenuContent>\r\n      @if (!item.deleted) {\r\n      <button mat-menu-item (click)=\"edit()\">{{'Edit'|translate}}</button>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"delete(true)\">{{'Delete'|translate}}</button>\r\n      }\r\n      @else {\r\n      <button mat-menu-item (click)=\"delete(false)\">{{'Undo'|translate}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <span [innerHTML]=\"name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    <div>\r\n      <small class=\"flex\" [bizdocTooltip]=\"item.edited || item.time | amDateFormat: 'lll'\">{{item.edited || item.time | amTimeAgo}}</small>\r\n      @if (item.edited) {\r\n      &nbsp;<a (click)=\"edits()\" class=\"modification\">{{'Edited'| translate}}</a>\r\n      }\r\n      @if (!me) {\r\n      &nbsp;<a (click)=\"reply.emit()\" class=\"modification\">{{'Reply'| translate}}</a>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (voting) {\r\n  <div class=\"comment-actions\">\r\n    @if (item.votes > 0 || item.votes < 0) {\r\n    <a [class.score-negative]=\"item.votes < 0\" class=\"comment-score\" dir=\"ltr\" (click)=\"votes()\" [bizdocTooltip]=\"'Votes'|translate\">{{item.votes}}</a>\r\n    }\r\n    <mat-icon matRipple (click)=\"vote(1, $event)\" [class.voted-true]=\"item.voted===1\">thumb_up_alt</mat-icon>\r\n    <mat-icon matRipple (click)=\"vote(-1, $event)\" [class.voted-false]=\"item.voted===-1\">thumb_down_alt</mat-icon>\r\n  </div>\r\n  }\r\n</div>\r\n<ng-template #previewTemplate>\r\n  <img [src]=\"'data:image/png;base64,'+item.image\" alt=\"\" />\r\n</ng-template>\r\n" }]
+                    }, 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" }]
         }], 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]
@@ -13688,7 +13733,7 @@ class CommentsComponent {
         this._config = _config;
         this.change = new EventEmitter();
         this.sending = false;
-        this.showDeleted = false;
+        this.showDeleted = new Set();
         this._inFocus = false;
         this._top = false;
         this._textChange = new Subject();
@@ -13727,6 +13772,16 @@ class CommentsComponent {
         });
         this._textChange.pipe(debounceTime(TYPING_NOTIFY$1), takeUntil(this._destroy)).subscribe(() => this._mailbox.reportTyping(this.model.documentId).subscribe());
     }
+    /**
+     *
+     * @param comment
+     */
+    toggleShowDeleted(commentId) {
+        if (this.showDeleted.has(commentId))
+            this.showDeleted.delete(commentId);
+        else
+            this.showDeleted.add(commentId);
+    }
     _formatUserElement(person) {
         if (this._config.chat !== false)
             return this._chat.format(person);
@@ -13857,13 +13912,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\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container role=\"listitem\">\r\n      @if (!c.deleted || showDeleted) {\r\n        <bizdoc-comment\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}\n"], dependencies: [{ kind: "component", type: EditInputComponent, selector: "bizdoc-edit-text", inputs: ["placeholder", "text", "image", "resource", "disabled", "autofocus", "cache"], outputs: ["change", "ok", "focus", "blur"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: CommentComponent, selector: "bizdoc-comment", inputs: ["model", "item"], outputs: ["deleted", "reply"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    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" }] }); }
 }
 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\" #thread (scroll)=\"onScroll($event)\">\r\n  @for (c of model.comments; track c.id) {\r\n    <ng-container role=\"listitem\">\r\n      @if (!c.deleted || showDeleted) {\r\n        <bizdoc-comment\r\n          [model]=\"model\"\r\n          [item]=\"c\"\r\n          (reply)=\"reply(c)\">\r\n        </bizdoc-comment>\r\n      } @else {\r\n        <a (click)=\"showDeleted = true\" class=\"comment-deleted\">{{'Deleted' | translate}}</a>\r\n      }\r\n    </ng-container>\r\n  }\r\n</div>\r\n\r\n<div class=\"comments-typing\" [style.visibility]=\"typing ? 'visible': 'hidden'\">{{'Typing' | translate : typing}}</div>\r\n\r\n@if (replyName) {\r\n  <div class=\"comments-reply\">\r\n    <span [innerHTML]=\"replyName | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n    &nbsp; <a class=\"modification\" (click)=\"clearReply()\">{{'Cancel'|translate}}</a>\r\n  </div>\r\n}\r\n\r\n<bizdoc-edit-text (ok)=\"post($event)\" (change)=\"_textChange.next()\"\r\n                  placeholder=\"CommentHere\"\r\n  [disabled]=\"sending\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n</bizdoc-edit-text>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.comments-thread{flex:1 1 auto;overflow:auto;padding:8px 12px 0}.comment-deleted{align-self:center}.comments-typing,.comments-reply{font-size:12px;padding:0 8px}.comments-reply .modification{font-size:medium}\n"] }]
+                    }, 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"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: ChatInfo }, { type: MailboxService }, { type: HubService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -15735,8 +15790,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',
@@ -16015,8 +16070,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 {
@@ -16025,7 +16080,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)
@@ -16087,9 +16142,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);
@@ -16106,8 +16161,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);
@@ -16125,7 +16180,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
@@ -16133,21 +16188,21 @@ class FlowViewComponent extends TraceBase {
                 }
                 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('ActionTakenTo', who.name, action, this._translate.join(to));
                 }
             }
             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);
             }
         }
@@ -16173,12 +16228,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 {
@@ -16394,8 +16449,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));
@@ -16407,7 +16462,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;
@@ -16436,22 +16491,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;
@@ -16511,7 +16566,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,
@@ -16544,12 +16599,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;
@@ -19572,10 +19627,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) {
@@ -19784,7 +19840,7 @@ class SearchService {
         const results = [];
         if (value === '' || !value)
             // use focus the search with black value suggets recent documents
-            this._mailbox.findAll({ type: 'recent' }, { take: 5 }).subscribe(r => r.forEach(i => {
+            this._mailbox.findAll({}, { type: 'recent', take: 5 }).subscribe(r => r.forEach(i => {
                 results.push({
                     portal: new ComponentPortal(DocumentListingComponent),
                     model: i
@@ -21095,7 +21151,7 @@ class SlotsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SlotsComponent, isStandalone: false, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" >\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p.id; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" \r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw;box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i4$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$7.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SlotsComponent, isStandalone: false, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\r\n     cdkScrollable\r\n     @panes\r\n     (scroll)=\"enableNavigationArrows($event)\">\r\n  <!---->\r\n  @if (prev) {\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" >\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  }\r\n  <!--panes-->\r\n  @for (p of panes; track p.id; let i = $index) {\r\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n       (click)=\"select(i)\"\r\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane\" @pane>\r\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\r\n  </div>\r\n  @if (i < panes.length - 1) {\r\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\r\n  }\r\n  }\r\n  <!--dialog-->\r\n  @if (dialog) {\r\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\r\n  }\r\n  <!--next-->\r\n  @if (next) {\r\n  <div class=\"scroll-arrow forward\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" \r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n  }\r\n</div>\r\n<!--tabs-->\r\n@if (tabs.length) {\r\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\r\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\r\n  <!--title-->\r\n  <div class=\"row tabs-title\">\r\n    @if (swapTab) {\r\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    }\r\n    <h2>{{group}}</h2>\r\n    @if(selectedTab?.expandable) {\r\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\r\n    }\r\n    @if(selectedTab?.dismissable) {\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    }\r\n  </div>\r\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <a mat-tab-link class=\"mat-tab-link\"\r\n       (click)=\"selectedTabIndex = i\"\r\n       [active]=\"selectedTabIndex === i\">\r\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\r\n      {{t.title}}\r\n      <!--@if (t.dismissable) {\r\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n      }-->\r\n      <!--inline=\"true\"-->\r\n    </a>\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\r\n    @for (t of tabs; track t.id; let i = $index) {\r\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\r\n    </div>\r\n    }\r\n  </mat-tab-nav-panel>\r\n</div>\r\n}\r\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{cursor:pointer;align-self:center;position:sticky;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{margin-inline-start:-50px;left:15px}.scroll-arrow:last-child{margin-inline-end:-50px;right:0}.panes{overflow-x:auto;position:relative;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw;box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i4$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$7.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             panesAnimation,
             paneAnimation,
             paramAnimation,
@@ -21250,7 +21306,7 @@ class ComposeMenuComponent {
         this._groups = {};
     }
     ngOnInit() {
-        this.items = this.search.valueChanges.pipe(takeUntil(this._destroy), debounceTime(DEBOUNCE_SEARCH_TIME), switchMap(v => this._mailbox.findAll(v ? { contains: v } : { type: 'recent' }, { take: 5 })));
+        this.items = this.search.valueChanges.pipe(takeUntil(this._destroy), debounceTime(DEBOUNCE_SEARCH_TIME), switchMap(v => this._mailbox.findAll({ contains: v }, { type: v ? null : 'recent', take: 5 })));
         this._working$.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(v => this.working = v);
         this._session.profile.forms.forEach(f => {
             if (!f.creatable)
@@ -21735,7 +21791,7 @@ class HomeMobileComponent extends HomeBase {
         this.secondaryDrawer.toggle().then(this.resize);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HomeMobileComponent, deps: [{ token: i1$1.Router }, { token: i2$b.MatBottomSheet }, { token: i7$2.Directionality }, { token: ChatInfo }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: HomeMobileComponent, isStandalone: false, selector: "bizdoc-mobile-home", viewQueries: [{ propertyName: "menuDrawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "secondaryDrawer", first: true, predicate: ["secondaryDrawer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\" [class.loading]=\"loading\">\r\n  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]=\"'Menu' | translate\" [attr.aria-label]=\"'Menu' | translate\"><mat-icon>menu</mat-icon></button>\r\n  <div [routerLink]='[\"/dashboard\"]' matRipple [matRippleUnbounded]=\"true\" [matRippleRadius]=\"100\" [matRippleCentered]=\"true\" style=\"outline: none\">\r\n    <!--<img id=\"logo\" src=\"logo.svg\" alt=\"\" />-->\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"openNotifs($event)\" data-help=\"notifications\" [attr.aria-label]=\"'Notifications' | translate\" [bizdocTooltip]=\"'Notifications' | translate\">\r\n  <mat-icon [matBadge]=\"profile.messagesCount\" [matBadgeHidden]=\"!profile.messagesCount\"\r\n            matBadgeColor=\"accent\" aria-hidden=\"false\">notifications</mat-icon></button>\r\n  @if (chatEnabled) {\r\n    <button mat-icon-button (click)=\"chat()\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\" [bizdocTooltip]=\"'Chat' | translate\"><mat-icon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\" class=\"mat-icon-rtl-mirror\">chat</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<mat-sidenav-container autosize>\r\n  <mat-sidenav #menuDrawer data-help=\"menu\" mode=\"over\" closed class=\"mat-elevation-z5\">\r\n    <mat-nav-list class=\"nav-menu-mobile\">\r\n      <mat-list-item [routerLink]='[\"/dashboard\"]' [attr.aria-label]=\"'Dashboard' | translate\" routerLinkActive=\"active\" data-help=\"dashboard\">\r\n        <mat-icon matListItemIcon>apps</mat-icon><span matListItemTitle>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-expansion-panel expanded=\"true\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <!--<mat-icon>inbox</mat-icon>-->\r\n            <span>{{'Mailbox' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        @for (f of profile.folders; track f) {\r\n          <mat-list-item [routerLink]='[\"/mailbox/f\", f.name]' routerLinkActive=\"active\" [attr.data-help]=\"'folder-'+f.name\" [attr.aria-label]=\"f.title\">\r\n            <mat-icon matListItemIcon>{{f.icon}}</mat-icon>\r\n            <span matListItemTitle>{{f.title}}</span>\r\n          </mat-list-item>\r\n        }\r\n      </mat-expansion-panel>\r\n      @if (schedulerEnabled) {\r\n        <mat-list-item [routerLink]='[\"/schedule\"]' routerLinkActive=\"active\" [attr.aria-label]=\"'Scheduler' | translate\">\r\n          <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon>\r\n          <span matListItemTitle>{{ 'Schedule' | translate}}</span>\r\n        </mat-list-item>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      @if (enableAnalysis) {\r\n        @for (c of profile.cubes; track c) {\r\n          @if (c.views.length) {\r\n            <mat-expansion-panel class=\"mat-elevation-z0\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                  <!--<mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>-->\r\n                  <span>{{c.title}}</span>\r\n                </mat-panel-title>\r\n              </mat-expansion-panel-header>\r\n              @for (v of c.views; track v) {\r\n                <mat-list-item [routerLink]='[\"/cube\", c.name, \"v\", v.name]' routerLinkActive=\"active\" [attr.data-help]=\"'cube-view-'+v.name\">\r\n                  <mat-icon matListItemIcon>{{v.icon || 'insights'}}</mat-icon>\r\n                  <span matListItemTitle>{{v.title}}</span>\r\n                </mat-list-item>\r\n              }\r\n            </mat-expansion-panel>\r\n          }\r\n        }\r\n      }\r\n      @if (profile.reports.length) {\r\n        <mat-expansion-panel class=\"mat-elevation-z0\" [attr.aria-label]=\"'Reports' | translate\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              <!--<mat-icon>list_alt</mat-icon>-->\r\n              <span>{{'Reports' | translate}}</span>\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          @for (r of profile.reports; track r) {\r\n            <mat-list-item [routerLink]='[\"/reports\", r.name]' routerLinkActive=\"active\"\r\n              [attr.aria-label]=\"r.title\" [attr.data-help]=\"'report-'+r.name\">\r\n              <mat-icon matListItemIcon>{{r.icon}}</mat-icon><span matListItemTitle>{{r.title}}</span>\r\n            </mat-list-item>\r\n          }\r\n        </mat-expansion-panel>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" data-help=\"options\"\r\n        (click)=\"options($event)\">\r\n        <mat-icon matListItemIcon>settingson</mat-icon>\r\n        <span matListItemTitle>{{'Settings' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" (click)=\"signout()\">\r\n        <mat-icon matListItemIcon>logout</mat-icon>\r\n        <span matListItemTitle>{{'Power' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n  <mat-sidenav #secondaryDrawer position=\"end\" closed mode=\"over\" autoFocus=\"false\" class=\"mat-elevation-z3\">\r\n    @switch (mode) {\r\n      @case ('chat') {\r\n        <bizdoc-chat [(contact)]=\"contact\"></bizdoc-chat>\r\n      }\r\n      @case ('notifications') {\r\n        <bizdoc-notifications-table></bizdoc-notifications-table>\r\n      }\r\n    }\r\n  </mat-sidenav>\r\n  <mat-sidenav-content data-help=\"main\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n@if (composeEnabled) {\r\n  <button mat-fab [attr.aria-label]=\"'Compose'| translate\" [@fabFull]=\"composeState\" color=\"accent\" (click)=\"compose()\" data-help=\"compose\"><mat-icon>add</mat-icon></button>\r\n}\r\n", styles: ["#logo{padding-left:12px;padding-right:12px;vertical-align:middle;width:120px;filter:invert(1)}:host ::ng-deep .mat-sidenav-container{height:calc(100% - 58px)}:host ::ng-deep .mat-sidenav-container .home-content{padding:unset}::ng-deep .mat-drawer-inner-container{height:auto}router-outlet~*{position:absolute;height:100%;width:100%}.mat-mdc-fab{z-index:1;position:absolute;bottom:30px;right:30px}::ng-deep [dir=rtl] .mat-mdc-fab{left:30px;right:unset}:host ::ng-deep .mat-expansion-panel-body{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NotificationsTableComponent, selector: "bizdoc-notifications-table" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: ChatMobileComponent, selector: "bizdoc-chat", inputs: ["contact"], outputs: ["contactChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [fabAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: HomeMobileComponent, isStandalone: false, selector: "bizdoc-mobile-home", viewQueries: [{ propertyName: "menuDrawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "secondaryDrawer", first: true, predicate: ["secondaryDrawer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\" [class.loading]=\"loading\">\r\n  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]=\"'Menu' | translate\" [attr.aria-label]=\"'Menu' | translate\"><mat-icon>menu</mat-icon></button>\r\n  <div [routerLink]='[\"/dashboard\"]' matRipple [matRippleUnbounded]=\"true\" [matRippleRadius]=\"100\" [matRippleCentered]=\"true\" style=\"outline: none\">\r\n    <!--<img id=\"logo\" src=\"logo.svg\" alt=\"\" />-->\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"openNotifs($event)\" data-help=\"notifications\" [attr.aria-label]=\"'Notifications' | translate\" [bizdocTooltip]=\"'Notifications' | translate\">\r\n  <mat-icon [matBadge]=\"profile.messagesCount\" [matBadgeHidden]=\"!profile.messagesCount\"\r\n            matBadgeColor=\"accent\" aria-hidden=\"false\">notifications</mat-icon></button>\r\n  @if (chatEnabled) {\r\n    <button mat-icon-button (click)=\"chat()\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\" [bizdocTooltip]=\"'Chat' | translate\"><mat-icon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\" aria-hidden=\"false\" class=\"mat-icon-rtl-mirror\">chat</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<mat-sidenav-container autosize>\r\n  <mat-sidenav #menuDrawer data-help=\"menu\" mode=\"over\" closed class=\"mat-elevation-z5\">\r\n    <mat-nav-list class=\"nav-menu-mobile\">\r\n      <mat-list-item [routerLink]='[\"/dashboard\"]' [attr.aria-label]=\"'Dashboard' | translate\" routerLinkActive=\"active\" data-help=\"dashboard\">\r\n        <mat-icon matListItemIcon>apps</mat-icon><span matListItemTitle>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-expansion-panel expanded=\"true\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <!--<mat-icon>inbox</mat-icon>-->\r\n            <span>{{'Mailbox' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        @for (f of profile.folders; track f) {\r\n          <mat-list-item [routerLink]='[\"/mailbox/f\", f.name]' routerLinkActive=\"active\" [attr.data-help]=\"'folder-'+f.name\" [attr.aria-label]=\"f.title\">\r\n            <mat-icon matListItemIcon>{{f.icon}}</mat-icon>\r\n            <span matListItemTitle>{{f.title}}</span>\r\n          </mat-list-item>\r\n        }\r\n      </mat-expansion-panel>\r\n      @if (schedulerEnabled) {\r\n        <mat-list-item [routerLink]='[\"/schedule\"]' routerLinkActive=\"active\" [attr.aria-label]=\"'Scheduler' | translate\">\r\n          <mat-icon matListItemIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon>\r\n          <span matListItemTitle>{{ 'Schedule' | translate}}</span>\r\n        </mat-list-item>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      @if (enableAnalysis) {\r\n        @for (c of profile.cubes; track c) {\r\n          @if (c.views.length) {\r\n            <mat-expansion-panel class=\"mat-elevation-z0\">\r\n              <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                  <!--<mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>-->\r\n                  <span>{{c.title}}</span>\r\n                </mat-panel-title>\r\n              </mat-expansion-panel-header>\r\n              @for (v of c.views; track v) {\r\n                <mat-list-item [routerLink]='[\"/cube\", c.name, \"v\", v.name]' routerLinkActive=\"active\" [attr.data-help]=\"'cube-view-'+v.name\">\r\n                  <mat-icon matListItemIcon>{{v.icon || 'insights'}}</mat-icon>\r\n                  <span matListItemTitle>{{v.title}}</span>\r\n                </mat-list-item>\r\n              }\r\n            </mat-expansion-panel>\r\n          }\r\n        }\r\n      }\r\n      @if (profile.reports.length) {\r\n        <mat-expansion-panel class=\"mat-elevation-z0\" [attr.aria-label]=\"'Reports' | translate\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              <!--<mat-icon>list_alt</mat-icon>-->\r\n              <span>{{'Reports' | translate}}</span>\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          @for (r of profile.reports; track r) {\r\n            <mat-list-item [routerLink]='[\"/reports\", r.name]' routerLinkActive=\"active\"\r\n              [attr.aria-label]=\"r.title\" [attr.data-help]=\"'report-'+r.name\">\r\n              <mat-icon matListItemIcon>{{r.icon}}</mat-icon><span matListItemTitle>{{r.title}}</span>\r\n            </mat-list-item>\r\n          }\r\n        </mat-expansion-panel>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" data-help=\"options\"\r\n        (click)=\"options($event)\">\r\n        <mat-icon matListItemIcon>settingson</mat-icon>\r\n        <span matListItemTitle>{{'Settings' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" (click)=\"signout()\">\r\n        <mat-icon matListItemIcon>logout</mat-icon>\r\n        <span matListItemTitle>{{'Power' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n  <mat-sidenav #secondaryDrawer position=\"end\" closed mode=\"over\" autoFocus=\"false\" class=\"mat-elevation-z3\">\r\n    @switch (mode) {\r\n      @case ('chat') {\r\n        <bizdoc-chat [(contact)]=\"contact\"></bizdoc-chat>\r\n      }\r\n      @case ('notifications') {\r\n        <bizdoc-notifications-table></bizdoc-notifications-table>\r\n      }\r\n    }\r\n  </mat-sidenav>\r\n  <mat-sidenav-content data-help=\"main\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n@if (composeEnabled) {\r\n  <button mat-fab [attr.aria-label]=\"'Compose'| translate\" [@fabFull]=\"composeState\" color=\"accent\" (click)=\"compose()\" data-help=\"compose\"><mat-icon>add</mat-icon></button>\r\n}\r\n", styles: ["#logo{padding-left:12px;padding-right:12px;vertical-align:middle;width:120px;filter:invert(1)}:host ::ng-deep .mat-sidenav-container{height:calc(100% - 58px)}:host ::ng-deep .mat-sidenav-container .home-content{padding:unset}::ng-deep .mat-drawer-inner-container{height:auto}router-outlet~*{position:absolute;height:100%;width:100%}.mat-mdc-fab{z-index:1;position:absolute;bottom:30px;right:30px}::ng-deep [dir=rtl] .mat-mdc-fab{left:30px;right:unset}:host ::ng-deep .mat-expansion-panel-body{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NotificationsTableComponent, selector: "bizdoc-notifications-table" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: ChatMobileComponent, selector: "bizdoc-chat", inputs: ["contact"], outputs: ["contactChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [fabAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HomeMobileComponent, decorators: [{
             type: Component,
@@ -23427,8 +23483,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) {
@@ -31659,15 +31715,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
@@ -33070,7 +33126,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: SystemService }, { token: SessionService }, { token: PaneRef }, { token: PanesRouter }, { token: PromptService }, { token: TranslateService }, { token: Popup }, { token: GuideService }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DocumentTraceComponent, isStandalone: false, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["filterArgs"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\r\n<!-- diagram -->\r\n  @case ('diagram') {\r\n<div class=\"column flex\">\r\n  <mat-toolbar>\r\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    |\r\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n  </mat-toolbar>\r\n  <div class=\"row flex\">\r\n    <!-- timeline -->\r\n    @if (timeline?.items.length > 1) {\r\n    <div class=\"timeline\" data-help=\"timeline\">\r\n      @for (date of timeline.items; track date; let last = $last) {\r\n      <div class=\"item\"\r\n           [class.active]=\"date.time === timeline.date\"\r\n           (click)=\"highlightTime(date.time)\" matRipple>\r\n        <div class=\"title\">\r\n          @if (!last || !timeline.estimate) {\r\n          @if (date.userId) {\r\n          <span class=\"who\">\r\n            {{date.userId | userName | async }}\r\n          </span>\r\n          }\r\n          <br />\r\n          <span class=\"time\">\r\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n          </span>\r\n          } @else {\r\n          {{'Estimate' | translate}}\r\n          }\r\n        </div>\r\n        <div class=\"indicator-container\">\r\n          <div class=\"indicator\"></div>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"flex\" #diagram dir=\"ltr\">\r\n    </div>\r\n  </div>\r\n</div>\r\n  }\r\n<!-- browse -->\r\n  @default {\r\n<div class=\"flex column fill\">\r\n  <mat-toolbar class=\"row\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>{{anyFilters ? 'filter_list_off': 'filter_list'}}</mat-icon></button>\r\n  </mat-toolbar>\r\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n  <!-- table -->\r\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\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\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n    </ng-container>\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\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n    </ng-container>\r\n    <!-- StateId column -->\r\n    <ng-container matColumnDef=\"stateId\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n      </mat-cell>\r\n    </ng-container>\r\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n             (click)=\"open(item)\">\r\n    </mat-row>\r\n  </mat-table>\r\n  <!-- range -->\r\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\r\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                      groupBy=\"Years\" intervalType='Months'\r\n                      (changed)='rangeChanged($event)'>\r\n    <e-rangenavigator-series-collection>\r\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n      </e-rangenavigator-series>\r\n    </e-rangenavigator-series-collection>\r\n  </ejs-rangenavigator>\r\n</div>\r\n  }\r\n}\r\n<!-- args -->\r\n<ng-template #filterArgs>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column gap\">\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$3.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6$6.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i6$6.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i6$6.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DocumentTraceComponent, isStandalone: false, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["filterArgs"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\r\n<!-- diagram -->\r\n  @case ('diagram') {\r\n<div class=\"column flex\">\r\n  <mat-toolbar>\r\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n    |\r\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n  </mat-toolbar>\r\n  <div class=\"row flex\">\r\n    <!-- timeline -->\r\n    @if (timeline?.items.length > 1) {\r\n    <div class=\"timeline\" data-help=\"timeline\">\r\n      @for (date of timeline.items; track date; let last = $last) {\r\n      <div class=\"item\"\r\n           [class.active]=\"date.time === timeline.date\"\r\n           (click)=\"highlightTime(date.time)\" matRipple>\r\n        <div class=\"title\">\r\n          @if (!last || !timeline.estimate) {\r\n          @if (date.userId) {\r\n          <span class=\"who\">\r\n            {{date.userId | userName | async }}\r\n          </span>\r\n          }\r\n          <br />\r\n          <span class=\"time\">\r\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n          </span>\r\n          } @else {\r\n          {{'Estimate' | translate}}\r\n          }\r\n        </div>\r\n        <div class=\"indicator-container\">\r\n          <div class=\"indicator\"></div>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"flex\" #diagram dir=\"ltr\">\r\n    </div>\r\n  </div>\r\n</div>\r\n  }\r\n<!-- browse -->\r\n  @default {\r\n<div class=\"flex column fill\">\r\n  <mat-toolbar class=\"row\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>{{anyFilters ? 'filter_list_off': 'filter_list'}}</mat-icon></button>\r\n  </mat-toolbar>\r\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n  <!-- table -->\r\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\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\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n    </ng-container>\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\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n    </ng-container>\r\n    <!-- StateId column -->\r\n    <ng-container matColumnDef=\"stateId\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n      </mat-cell>\r\n    </ng-container>\r\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n             (click)=\"open(item)\">\r\n    </mat-row>\r\n  </mat-table>\r\n  <!-- range -->\r\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\r\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                      groupBy=\"Years\" intervalType='Months'\r\n                      (changed)='rangeChanged($event)'>\r\n    <e-rangenavigator-series-collection>\r\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n      </e-rangenavigator-series>\r\n    </e-rangenavigator-series-collection>\r\n  </ejs-rangenavigator>\r\n</div>\r\n  }\r\n}\r\n<!-- args -->\r\n<ng-template #filterArgs>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column gap\">\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$3.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6$6.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i6$6.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i6$6.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { 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$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
 };
 DocumentTraceComponent = __decorate([
     BizDoc({ selector: 'bizdoc-trace-utility' })
@@ -35963,7 +36019,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ConfigurationDesignerComponent, deps: [{ token: PanesRouter }, { token: i1$2.FormBuilder }, { token: TranslateService }, { token: PromptService }, { token: SessionService }, { token: i0.ElementRef }, { token: i0.Injector }, { token: Popup }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ConfigurationDesignerComponent, isStandalone: false, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "filters", first: true, predicate: ["filters"], descendants: true, read: TemplateRef }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (loading) {\r\n  <bizdoc-none title=\"SettingThingsUp\" subtitle=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n}\r\n<div>\r\n  @for (s of sections | filterBy:'hide': false: searchBy; track s) {\r\n    <section>\r\n      <h2 class=\"mat-h1\">{{s.title}}</h2>\r\n      <!--<hr />-->\r\n      <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n        @for (e of s.elements | filterBy:'hide': false: searchBy; track e) {\r\n          <mat-card [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n            <!-- @item-->\r\n            <mat-card-header>\r\n              <mat-card-title>\r\n                {{e.title|localizedString}}\r\n                <span class=\"divider\"></span>\r\n                @if (e.help) {\r\n                  <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\">help_outline</mat-icon>\r\n                }\r\n              </mat-card-title>\r\n              <mat-card-subtitle>\r\n                {{e.name}}\r\n              </mat-card-subtitle>\r\n            </mat-card-header>\r\n            <mat-card-content>\r\n              <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n            </mat-card-content>\r\n            <mat-card-actions class=\"row\">\r\n              @if (!e.copyOf) {\r\n                <button mat-icon-button (click)=\"copy(s, e)\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n              }\r\n              @if (e.draft || e.empty) {\r\n                <button mat-icon-button (click)=\"remove(s, e)\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n              }\r\n              <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n              <span class=\"divider\"></span>\r\n              <button mat-icon-button (click)=\"edit(s, e)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n            </mat-card-actions>\r\n          </mat-card>\r\n        }\r\n        @if (s.templates?.length) {\r\n          <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\">\r\n            <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n            <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n            <mat-menu #templateMenu>\r\n              @for (t of s.templates; track t) {\r\n                <button mat-menu-item (click)=\"create(s, t)\">\r\n                  @if (t.family) {\r\n                    <span>\r\n                      {{t.family}}\r\n                      &nbsp;-&nbsp;\r\n                    </span>\r\n                  }\r\n                  <span>\r\n                    {{t.title}}\r\n                  </span>\r\n                </button>\r\n              }\r\n            </mat-menu>\r\n          </div>\r\n        }\r\n      </div>\r\n    </section>\r\n  }\r\n</div>\r\n<!-- search filters -->\r\n<ng-template #filters>\r\n  <form autocomplete=\"off\" class=\"column gap\" [formGroup]=\"form\">\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <input matInput formControlName=\"contains\" autocomplete=\"off\" [placeholder]=\"'Contains' | translate\" #contains>\r\n      @if (form.value.contains) {\r\n      <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\" [bizdocTooltip]=\"'Close' | translate\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <mat-label>{{'Categories'|translate}}</mat-label>\r\n      <mat-select formControlName=\"sections\" multiple>\r\n        @for (c of sections | sort : 'title'; track c) {\r\n        <mat-option [value]=\"c.type\">{{c.title}}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    @if(families.length) {\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <mat-label>{{'Families'|translate}}</mat-label>\r\n      <mat-select formControlName=\"family\">\r\n        <mat-option>{{'All'|translate}}</mat-option>\r\n        @for (f of families; track f) {\r\n        <mat-option [value]=\"f\">{{f}}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{outline:none}section h2{margin:10px}section h2 .sticky{background-color:var(--mat-table-background-color)}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i9.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { 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: "component", type: i11.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i11.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i11.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i12.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: FilterPipe, name: "filterBy" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ConfigurationDesignerComponent, isStandalone: false, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "filters", first: true, predicate: ["filters"], descendants: true, read: TemplateRef }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (loading) {\r\n  <bizdoc-none title=\"SettingThingsUp\" subtitle=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n}\r\n<div>\r\n  @for (s of sections | filterBy:'hide': false: searchBy; track s) {\r\n    <section>\r\n      <h2 class=\"mat-h1\">{{s.title}}</h2>\r\n      <!--<hr />-->\r\n      <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n        @for (e of s.elements | filterBy:'hide': false: searchBy; track e) {\r\n          <mat-card [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n            <!-- @item-->\r\n            <mat-card-header>\r\n              <mat-card-title>\r\n                {{e.title|localizedString}}\r\n                <span class=\"divider\"></span>\r\n                @if (e.help) {\r\n                  <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\">help_outline</mat-icon>\r\n                }\r\n              </mat-card-title>\r\n              <mat-card-subtitle>\r\n                {{e.name}}\r\n              </mat-card-subtitle>\r\n            </mat-card-header>\r\n            <mat-card-content>\r\n              <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n            </mat-card-content>\r\n            <mat-card-actions class=\"row\">\r\n              @if (!e.copyOf) {\r\n                <button mat-icon-button (click)=\"copy(s, e)\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n              }\r\n              @if (e.draft || e.empty) {\r\n                <button mat-icon-button (click)=\"remove(s, e)\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n              }\r\n              <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n              <span class=\"divider\"></span>\r\n              <button mat-icon-button (click)=\"edit(s, e)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n            </mat-card-actions>\r\n          </mat-card>\r\n        }\r\n        @if (s.templates?.length) {\r\n          <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\">\r\n            <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n            <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n            <mat-menu #templateMenu>\r\n              @for (t of s.templates; track t) {\r\n                <button mat-menu-item (click)=\"create(s, t)\">\r\n                  @if (t.family) {\r\n                    <span>\r\n                      {{t.family}}\r\n                      &nbsp;-&nbsp;\r\n                    </span>\r\n                  }\r\n                  <span>\r\n                    {{t.title}}\r\n                  </span>\r\n                </button>\r\n              }\r\n            </mat-menu>\r\n          </div>\r\n        }\r\n      </div>\r\n    </section>\r\n  }\r\n</div>\r\n<!-- search filters -->\r\n<ng-template #filters>\r\n  <form autocomplete=\"off\" class=\"column gap\" [formGroup]=\"form\">\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <input matInput formControlName=\"contains\" autocomplete=\"off\" [placeholder]=\"'Contains' | translate\" #contains>\r\n      @if (form.value.contains) {\r\n      <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\" [bizdocTooltip]=\"'Close' | translate\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <mat-label>{{'Categories'|translate}}</mat-label>\r\n      <mat-select formControlName=\"sections\" multiple>\r\n        @for (c of sections | sort : 'title'; track c) {\r\n        <mat-option [value]=\"c.type\">{{c.title}}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    @if(families.length) {\r\n    <mat-form-field subscriptSizing=\"dynamic\">\r\n      <mat-label>{{'Families'|translate}}</mat-label>\r\n      <mat-select formControlName=\"family\">\r\n        <mat-option>{{'All'|translate}}</mat-option>\r\n        @for (f of families; track f) {\r\n        <mat-option [value]=\"f\">{{f}}</mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    }\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{outline:none}section h2{margin:10px}section h2 .sticky{background-color:var(--mat-table-background-color)}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i9.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { 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: "component", type: i11.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i11.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i11.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: FilterPipe, name: "filterBy" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] }); }
 };
 ConfigurationDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-designer' })