@bizdoc/core 3.8.8 → 3.8.10

package/fesm2022/bizdoc-core.mjs

@@ -1,13 +1,13 @@
 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 { Subject, firstValueFrom, of, forkJoin, filter, map as map$1, BehaviorSubject, 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';
 import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';
 import * as i4$1 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
-import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
+import { HubConnectionState, HubConnectionBuilder } from '@microsoft/signalr';
 import { trigger, transition, style, animate, state, query, stagger, animateChild, keyframes } from '@angular/animations';
 import dayjs from 'dayjs';
 import { Loader } from '@googlemaps/js-api-loader';
@@ -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';
@@ -980,15 +980,14 @@ class AuthenticationImpl {
 class HubService {
     constructor(config, _auth) {
         this._auth = _auth;
-        this._state = new Subject();
-        this.state$ = this._state.asObservable();
+        this._connectionState = new BehaviorSubject(HubConnectionState.Disconnected);
         this._configurationChange = new Subject();
         this._newMail = new Subject();
         this._newChat = new Subject();
         this._newComment = new Subject();
         this._commentUpdate = new Subject();
         this._commentDelete = new Subject();
-        this._updateMail = new Subject();
+        this._mailUpdate = new Subject();
         this._mailDelete = new Subject();
         this._mailHeaderUpdate = new Subject();
         this._newNotify = new Subject();
@@ -1002,6 +1001,7 @@ class HubService {
         this._jobProgress = new Subject();
         this._reportProgress = new Subject();
         this._callback = new Subject();
+        this.state$ = this._connectionState.asObservable();
         this.configurationChange$ = this._configurationChange.asObservable();
         this.jobProgress$ = this._jobProgress.asObservable();
         this.reportProgress$ = this._reportProgress.asObservable();
@@ -1014,13 +1014,13 @@ class HubService {
         this.commentUpdate$ = this._commentUpdate.asObservable();
         this.commentDelete$ = this._commentDelete.asObservable();
         /** new notification */
-        this.notify$ = this._newNotify.asObservable();
+        this.newNotification$ = this._newNotify.asObservable();
         this.chat$ = this._newChat.asObservable();
         this.updateNotify$ = this._updateNotify.asObservable();
         /** new mail */
         this.new$ = this._newMail.asObservable();
         /** mail update */
-        this.update$ = this._updateMail.asObservable();
+        this.update$ = this._mailUpdate.asObservable();
         this.updateMailHeader$ = this._mailHeaderUpdate.asObservable();
         this.delete$ = this._mailDelete.asObservable();
         this.comment$ = this._newComment.asObservable();
@@ -1040,7 +1040,7 @@ class HubService {
             //skipNegotiation: true,
         }).withAutomaticReconnect().build();
         this._connection.on('newMail', (data) => this._newMail.next(data));
-        this._connection.on('mailUpdate', (data) => this._updateMail.next(data));
+        this._connection.on('mailUpdate', (data) => this._mailUpdate.next(data));
         this._connection.on('mailDelete', (data) => this._mailDelete.next(data));
         this._connection.on('mailHeaderUpdate', (data) => this._mailHeaderUpdate.next(data));
         this._connection.on('newComment', (data) => {
@@ -1061,8 +1061,8 @@ class HubService {
         this._connection.on('jobProgress', (data) => this._jobProgress.next(data));
         this._connection.on('reportProgress', (data) => this._reportProgress.next(data));
         this._connection.on('configurationChange', () => this._configurationChange.next());
-        this._connection.onclose(() => this._state.next(HubConnectionState.Disconnected));
-        this._connection.onreconnected(() => this._state.next(HubConnectionState.Connected));
+        this._connection.onclose(() => this._connectionState.next(HubConnectionState.Disconnected));
+        this._connection.onreconnected(() => this._connectionState.next(HubConnectionState.Connected));
     }
     get state() {
         return this._connection.state;
@@ -1074,11 +1074,11 @@ class HubService {
     }
     async start() {
         await this._connection.start();
-        this._state.next(HubConnectionState.Connected);
+        this._connectionState.next(HubConnectionState.Connected);
     }
     async stop() {
         await this._connection.stop();
-        this._state.next(HubConnectionState.Disconnected);
+        this._connectionState.next(HubConnectionState.Disconnected);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HubService, deps: [{ token: BIZDOC_CONFIG }, { token: AuthenticationImpl }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HubService, providedIn: "root" }); }
@@ -1118,7 +1118,7 @@ class SessionService {
      */
     prepare() {
         const promises = [];
-        ('serviceWorker' in navigator) && this._loadServiceWorker();
+        ('serviceWorker' in navigator) && loadServiceWorker();
         this._config.maps && promises.push(this._loadGoogleMaps());
         promises.push(this._changeTheme(this.theme));
         return Promise.all(promises);
@@ -1128,46 +1128,79 @@ class SessionService {
         this._http = _http;
         this._cookies = _cookies;
         this._hub = _hub;
-        this.Themes = this._config.themes || THEMES;
-        this._loaded = new Subject();
-        this._themeChange = new Subject();
-        this.loaded = this._loaded.asObservable();
-        this.themeChange = this._themeChange.asObservable();
+        this._messagesCount$ = new BehaviorSubject(0);
+        this._inboxCount$ = new BehaviorSubject(0);
+        this._loaded$ = new Subject();
+        this._themeChange$ = new Subject();
         this._firebase = new FirebaseService(this._config ? this._config.firebase : undefined, this);
+        this.loaded = this._loaded$.asObservable();
+        this.themeChange = this._themeChange$.asObservable();
+        this.notificationsCountChange$ = this._messagesCount$.asObservable();
+        this.inboxCountChange$ = this._inboxCount$.asObservable();
+        this.Themes = this._config.themes || THEMES;
         iconRegistry.addSvgIconLiteral('excel', sanitizer.bypassSecurityTrustHtml(EXCEL_ICON));
         iconRegistry.addSvgIconLiteral('word', sanitizer.bypassSecurityTrustHtml(WORD_ICON));
         iconRegistry.addSvgIconLiteral('powerpoint', sanitizer.bypassSecurityTrustHtml(POWERPOINT_ICON));
         iconRegistry.addSvgIconLiteral('pdf', sanitizer.bypassSecurityTrustHtml(PDF_ICON));
-        _hub.notify$.subscribe(n => {
-            const { messages, messagesCount } = this.profile;
+        _hub.newNotification$.subscribe(n => {
+            const { messages } = this._profile;
             messages.push(n.model);
-            this.profile.messagesCount = !messagesCount ? 1 :
-                messagesCount + 1;
+            this._stepNotificationsCount(1);
         });
         //
         _hub.updateNotify$.subscribe(e => {
-            const { originalRead, model: { id, sent, read } } = e, { messages, messagesCount } = this.profile;
+            const { originalRead, model: { id, sent, read } } = e, { messages } = this._profile;
             const item = messages.find(n => n.id === id);
             if (item)
                 Object.assign(item, e.model);
             else
                 messages.push(e.model);
-            if (originalRead !== undefined && read !== originalRead &&
-                this._isAboveWatermark(sent))
-                this.profile.messagesCount = (messagesCount || 0) + (read ? -1 : 1);
+            originalRead !== undefined && read !== originalRead &&
+                this._isAboveWatermark(sent) &&
+                this._stepNotificationsCount(read ? -1 : 1);
         });
         //
         _hub.new$.subscribe(m => {
-            const { userId, model: { folderId } } = m, { inboxCount, folders, userId: me } = this.profile;
+            const { userId, model: { folderId } } = m, { folders, userId: me } = this._profile;
             if (userId !== me)
                 return;
-            this.profile.inboxCount = !inboxCount ? 1 :
-                inboxCount + 1;
+            this._stepInboxCount(1);
             const folder = folders.find(f => f.name === folderId);
             folder.count = !folder.count ? 1 :
                 folder.count + 1;
         });
     }
+    reportInboxRead(date, move) {
+        const { inboxView } = this._profile.options;
+        inboxView !== undefined &&
+            inboxView < date &&
+            this._stepInboxCount(move);
+    }
+    reportNotificationsRead(date, move) {
+        const { notificationsView } = this._profile.options;
+        notificationsView !== undefined &&
+            notificationsView < date &&
+            !this.isImpersonating &&
+            this._stepNotificationsCount(move);
+    }
+    _stepNotificationsCount(move) {
+        let { messagesCount } = this._profile;
+        if (move === 0)
+            messagesCount = 0;
+        else
+            messagesCount = (messagesCount || 0) + move;
+        this._profile.messagesCount = messagesCount;
+        this._messagesCount$.next(messagesCount);
+    }
+    _stepInboxCount(move) {
+        let { inboxCount } = this._profile;
+        if (move === 0)
+            inboxCount = 0;
+        else
+            inboxCount = (inboxCount || 0) + move;
+        this._profile.inboxCount = inboxCount;
+        this._inboxCount$.next(inboxCount);
+    }
     /** */
     get tags() {
         return this._tags || (this._tags =
@@ -1207,7 +1240,7 @@ class SessionService {
     }
     set theme(value) {
         this._theme = value;
-        this._changeTheme(value).then(() => this._themeChange.next(value));
+        this._changeTheme(value).then(() => this._themeChange$.next(value));
         localStorage.setItem('theme', value.name);
     }
     get ok() { return this.profile !== undefined; }
@@ -1285,7 +1318,7 @@ class SessionService {
             this._hub.state !== HubConnectionState.Connected && this._hub.start();
             this._firebase.state !== FirebaseState.Activated &&
                 this._firebase.activate();
-            this._loaded.next();
+            this._loaded$.next();
         }));
     }
     getProfileExtra(name) {
@@ -1320,14 +1353,14 @@ class SessionService {
     }
     markInboxAsTouched() {
         return firstValueFrom(this._http.put('/api/account/inboxview', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
-            this.profile.inboxCount = 0;
-            this.profile.options.inboxView = e.time;
+            this._stepInboxCount(0);
+            this._profile.options.inboxView = e.time;
         })));
     }
     markNotificationsAsTouched() {
         return firstValueFrom(this._http.put('/api/account/notificationsView', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
-            this.profile.messagesCount = 0;
-            this.profile.options.notificationsView = e.time;
+            this._stepNotificationsCount(0);
+            this._profile.options.notificationsView = e.time;
         })));
     }
     _constructPalette(color) {
@@ -1380,12 +1413,6 @@ class SessionService {
             }
         });
     }
-    _loadServiceWorker() {
-        window.addEventListener('load', function () {
-            navigator.serviceWorker.register('/js/app-sw.js').then(function () {
-            }, null);
-        });
-    }
     _loadGoogleMaps() {
         const apiKey = this._config.maps.apiKey;
         const loader = new Loader({
@@ -1407,6 +1434,12 @@ 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 loadServiceWorker() {
+    window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/js/app-sw.js').then(function () {
+        }, null);
+    });
+}
 
 class ToNowPipe {
     transform(value, ...args) {
@@ -7189,18 +7222,17 @@ class MailboxService {
         this._session = _session;
         this._auth = _auth;
         this._http = _http;
-        this._change$ = new Subject();
-        this._delete$ = new Subject();
-        /** */
-        this.changed = this._change$.asObservable();
-        this.deleted = this._delete$.asObservable();
+        this._changed$ = new Subject();
+        this._deleted$ = new Subject();
+        this.recordChange$ = this._changed$.asObservable();
+        this.recordDelete$ = this._deleted$.asObservable();
         /**
          * Keep flags in sync.
          */
         this._sync = () => (observe) => {
             return observe.pipe(tap(m => {
                 m.loaded = true;
-                this._change$.next(m);
+                this._changed$.next(m);
             }));
         };
     }
@@ -7235,7 +7267,7 @@ class MailboxService {
     }
     updateTags(id, tags) {
         return this._http.put(`/api/mailbox/tag/${id}`, { tags }).pipe(tap(() => {
-            this._change$.next({ id, tags });
+            this._changed$.next({ id, tags });
         }));
     }
     /**
@@ -7249,7 +7281,7 @@ class MailboxService {
     }
     move(id, folderId) {
         return this._http.put(`/api/mailbox/move/${id}?folderId=${folderId}`, {}).pipe(tap(() => {
-            this._change$.next({
+            this._changed$.next({
                 id,
                 folderId
             });
@@ -7361,10 +7393,10 @@ class MailboxService {
         });
     }
     toggleFlag(id, flag) {
-        return this._http.put(`/api/mailbox/flag/${id}?flag=${flag}`, null).pipe(tap(() => this._change$.next({ id, flag })));
+        return this._http.put(`/api/mailbox/flag/${id}?flag=${flag}`, null).pipe(tap(() => this._changed$.next({ id, flag })));
     }
     markCommentsViewed(id) {
-        return this._http.put(`/api/comments/viewed/${id}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap((e) => this._change$.next({ id, viewed: e.time })));
+        return this._http.put(`/api/comments/viewed/${id}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap((e) => this._changed$.next({ id, viewed: e.time })));
     }
     reportTyping(id) {
         return this._http.put(`/api/comments/typing/${id}`, {}, { headers: { 'no-progress': 'true' } });
@@ -7409,7 +7441,7 @@ class MailboxService {
     _wrap(form, project) {
         return this._geoLocation(form).pipe(switchMap(project), tap(m => {
             m.loaded = true;
-            this._change$.next(m);
+            this._changed$.next(m);
         }));
     }
     /**
@@ -7443,18 +7475,29 @@ class MailboxService {
         return this._http.get(`/api/mail/${id}`).pipe(tap((m) => read === false && m.read === true &&
             this._updateUnreadWatermark(m.received, m.folderId, -1)));
     }
+    /**
+     *
+     * @param date
+     * @param folderId
+     * @param move
+     */
     _updateUnreadWatermark(date, folderId, move) {
-        const { inboxCount, folders, options: { inboxView } } = this._session.profile;
-        if (
+        const { folders } = this._session.profile;
         // date is above watermark
-        inboxView &&
-            inboxView < date)
-            this._session.profile.inboxCount = !inboxCount ? 0 :
-                inboxCount + move;
+        this._session.reportInboxRead(date, move);
         // decrease
         const folder = folders.find(f => f.name === folderId);
         folder.count = Math.max(0, (folder.count || 0) + move);
     }
+    /**
+       *
+       * @param id
+       * @param form
+       * @param version
+       * @param model
+       * @param files
+       * @returns
+       */
     save(id, form, version, model, files) {
         //const fd = new FormData();
         //const modelBlob = new Blob([JSON.stringify(model)], {
@@ -7487,7 +7530,7 @@ class MailboxService {
         return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}`, model, { params })), this._sync());
     }
     delete(id) {
-        return this._http.delete(`/api/mail/${id}`).pipe(tap(() => this._delete$.next(id)));
+        return this._http.delete(`/api/mail/${id}`).pipe(tap(() => this._deleted$.next(id)));
     }
     toggleCommentHide(id, value) {
         return this._http.delete(`/api/comments/${id}?value=${value}`);
@@ -8956,7 +8999,7 @@ class ExpandedItemComponent {
                 (e.userId !== this._session.userId) && this._accounts.get(e.userId).subscribe(u => this._sb.toast('MailVersionUpdate', this.model.number, u.name));
             }
         });
-        this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(e => (e.id === this.model.id) &&
+        this._mailbox.recordChange$.pipe(takeUntil(this._destroy)).subscribe(e => (e.id === this.model.id) &&
             this._refresh());
         this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter$1(e => e.id === this.model.documentId)).subscribe(() => {
             this.typing = true;
@@ -9259,7 +9302,7 @@ class BrowseItemsComponent {
     }
     ngOnInit() {
         this.selection.changed.pipe(takeUntil(this._destroy)).subscribe(() => this._sharedActions());
-        this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(m => {
+        this._mailbox.recordChange$.pipe(takeUntil(this._destroy)).subscribe(m => {
             if (!this.dataSource)
                 return;
             const item = this.dataSource.data.find(c => c.id === m.id);
@@ -9278,7 +9321,7 @@ class BrowseItemsComponent {
                 m.model &&
                     this._add(m);
         });
-        this._mailbox.deleted.pipe(takeUntil(this._destroy)).subscribe(id => {
+        this._mailbox.recordDelete$.pipe(takeUntil(this._destroy)).subscribe(id => {
             if (!this.dataSource)
                 return;
             const item = this.dataSource.data.find(c => c.id === id);
@@ -9387,9 +9430,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 => {
@@ -9648,7 +9693,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.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amDateFormat: 'lll'\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar : null : CALENDAR_SPEC}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"repliedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.replied | amDateFormat: 'lll'\"> {{item.replied | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar : null : CALENDAR_SPEC }} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amDateFormat: 'lll'\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n        <span>\r\n          {{item.model[c.name] | amCalendar : null : CALENDAR_SPEC}}\r\n        </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\" (sent)=\"onActionTaken($event)\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$8.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$8.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.DecimalPipe, name: "number" }, { kind: "pipe", type: i9.CurrencyPipe, name: "currency" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             listAnimation,
             itemAnimation,
             expandListItemAnimation,
@@ -9867,7 +9912,7 @@ class ComposeFormComponent {
             }
         });
         // form may have changed by browse actions
-        this._mailbox.changed.pipe(takeUntil(this._destroy)).
+        this._mailbox.recordChange$.pipe(takeUntil(this._destroy)).
             subscribe(e => !this.working && e.id === this.model.id &&
             this._assign(e));
     }
@@ -10379,13 +10424,13 @@ class ComposePaneComponent {
             }
             this.page = page;
         });
-        this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(e => {
+        this._mailbox.recordChange$.pipe(takeUntil(this._destroy)).subscribe(e => {
             if (e.id === this.model.id && !this.working) {
                 if (e.folderId && e.folderId !== this.model.folderId)
                     this._close();
             }
         });
-        this._mailbox.deleted.pipe(takeUntil(this._destroy)).subscribe(e => e === this.model.id && !this.working &&
+        this._mailbox.recordDelete$.pipe(takeUntil(this._destroy)).subscribe(e => e === this.model.id && !this.working &&
             this._close());
         const container = this.dropableElement.nativeElement;
         this._dragDrop.pipe(debounceTime(100), takeUntil(this._destroy)).subscribe(ok => {
@@ -12747,6 +12792,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).
@@ -12837,6 +12887,11 @@ class AvatarComponent {
         this.modeColor = state.color;
         this._cd.markForCheck();
     }
+    /**
+     *
+     * @param name
+     * @returns
+     */
     _gen(name) {
         const initials = name.split(REGEX).map(p => p.charAt(0).toUpperCase()).
             join('').substring(0, 3);
@@ -12870,26 +12925,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) {
@@ -12917,20 +12969,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) {
@@ -12964,13 +13018,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
 const TEXT_CHAR = /[\w\-]/, NEW_LINE$1 = /[\s\n]/, SYMBOL_CHAR = /[@#]/;
 class TaggingDirective {
-    constructor(_input, _dir, _element, _overlay) {
+    constructor(_input, _dir, _element, router, _overlay) {
         this._input = _input;
         this._dir = _dir;
         this._element = _element;
         this._overlay = _overlay;
         this.resourceChange = new EventEmitter();
+        this._subscription = router?.events.pipe().subscribe(_ => this._close());
     }
+    /**
+     *
+     * @param _evt
+     */
     _handleInput(_evt) {
         const value = this._value;
         if (value) {
@@ -12980,14 +13039,17 @@ class TaggingDirective {
                 this._popup(DocumentTaggingComponent, value.substring(1));
         }
     }
+    /**
+     *
+     * @param evt
+     * @returns
+     */
     _handleKeydown(evt) {
         if (!this._instance)
             return;
         const { key } = evt;
         if (key == 'ArrowUp' || key == 'ArrowDown') {
             this._instance.keyManager.onKeydown(evt);
-            //const { key } = this._instance.keyManager.activeItem!;
-            //this._assign(key);
             evt.preventDefault();
             evt.stopPropagation();
         }
@@ -13016,7 +13078,7 @@ class TaggingDirective {
      * @param comp
      * @param value
      */
-    _popup(comp, value = '') {
+    _popup(comp, value) {
         this._instance &&
             this._close();
         const position = this._overlay.position().
@@ -13029,7 +13091,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));
@@ -13065,13 +13132,20 @@ class TaggingDirective {
         this._close();
         this._input.focus();
     }
+    /**
+     *
+     * @param key
+     */
     _assign(key) {
         const val = this._value, position = this._element.nativeElement.selectionStart;
         this._element.nativeElement.setRangeText(key, position - (val ? val.length - 1 : 0), position);
         this._input.value = this._element.nativeElement.value;
         this._element.nativeElement.selectionStart = position + key.length - (val ? val.length - 1 : 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TaggingDirective, deps: [{ token: i4$1.MatInput, self: true }, { token: i7$2.Directionality }, { token: i0.ElementRef }, { token: i2$3.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TaggingDirective, deps: [{ token: i4$1.MatInput, self: true }, { token: i7$2.Directionality }, { token: i0.ElementRef }, { token: PanesRouter, optional: true }, { token: i2$3.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: TaggingDirective, isStandalone: false, selector: "[bizdocTagging]", inputs: { resource: ["bizdocTagging", "resource"] }, outputs: { resourceChange: "bizdocTaggingChange" }, host: { listeners: { "keydown": "_handleKeydown($event)", "input": "_handleInput($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TaggingDirective, decorators: [{
@@ -13086,7 +13160,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i4$1.MatInput, decorators: [{
                     type: Self
-                }] }, { type: i7$2.Directionality }, { type: i0.ElementRef }, { type: i2$3.Overlay }], propDecorators: { resource: [{
+                }] }, { type: i7$2.Directionality }, { type: i0.ElementRef }, { type: PanesRouter, decorators: [{
+                    type: Optional
+                }] }, { type: i2$3.Overlay }], propDecorators: { resource: [{
                 type: Input,
                 args: ['bizdocTagging']
             }], resourceChange: [{
@@ -13276,11 +13352,11 @@ class EditInputComponent {
         delete this._image;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EditInputComponent, deps: [{ token: Popup }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: EditInputComponent, isStandalone: false, selector: "bizdoc-edit-text", inputs: { placeholder: "placeholder", text: "text", image: "image", resource: "resource", disabled: "disabled", autofocus: "autofocus", cache: "cache" }, outputs: { change: "change", onOk: "ok", onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "_rte", first: true, predicate: RichTextEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"column\">\r\n  @switch (mode) {\r\n  @case ('html') {\r\n  <ejs-richtexteditor [value]=\"text\"\r\n                      (change)=\"_htmlChange($event)\"\r\n                      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\r\n  }\r\n  @default {\r\n  <mat-form-field floatLabel=\"never\" class=\"flex\">\r\n    <textarea matInput cdkTextareaAutosize [autofocus]=\"autofocus\"\r\n              [(bizdocTagging)]=\"resource\"\r\n              (keydown)=\"_key($event)\"\r\n              (input)=\"_textChange($event)\"\r\n              [value]=\"text\"\r\n              (paste)=\"_paste($event)\"\r\n              [placeholder]=\"placeholder ? (placeholder | translate) : null\"\r\n              (focus)=\"onFocus.emit()\"\r\n              (focusout)=\"onBlur.emit()\"\r\n              maxlength=\"2000\"\r\n              #textArea></textarea>\r\n  </mat-form-field>\r\n  }\r\n  }\r\n  <div class=\"row nav-toolbar\">\r\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n@if (_image) {\r\n<div>\r\n  <img [src]=\"'data:image/png;base64,'+ _image\" />\r\n  <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"], dependencies: [{ kind: "component", type: i2$a.RichTextEditorComponent, selector: "ejs-richtexteditor", inputs: ["autoSaveOnIdle", "backgroundColor", "bulletFormatList", "codeBlockSettings", "cssClass", "editorMode", "emojiPickerSettings", "enableAutoUrl", "enableHtmlEncode", "enableHtmlSanitizer", "enablePersistence", "enableResize", "enableRtl", "enableTabKey", "enableXhtml", "enabled", "enterKey", "exportPdf", "exportWord", "fileManagerSettings", "floatingToolbarOffset", "fontColor", "fontFamily", "fontSize", "format", "formatPainterSettings", "formatter", "height", "htmlAttributes", "iframeSettings", "importWord", "inlineMode", "insertAudioSettings", "insertImageSettings", "insertVideoSettings", "keyConfig", "locale", "maxLength", "numberFormatList", "pasteCleanupSettings", "placeholder", "quickToolbarSettings", "readonly", "saveInterval", "shiftEnterKey", "showCharCount", "showTooltip", "slashMenuSettings", "tableSettings", "toolbarSettings", "undoRedoSteps", "undoRedoTimer", "value", "valueTemplate", "width"], outputs: ["actionBegin", "actionComplete", "afterImageDelete", "afterMediaDelete", "afterPasteCleanup", "beforeDialogClose", "beforeDialogOpen", "beforeFileUpload", "beforeImageDrop", "beforeImageUpload", "beforePasteCleanup", "beforeQuickToolbarOpen", "beforeSanitizeHtml", "blur", "change", "created", "destroyed", "dialogClose", "dialogOpen", "fileRemoving", "fileSelected", "fileUploadFailed", "fileUploadSuccess", "fileUploading", "focus", "imageRemoving", "imageSelected", "imageUploadFailed", "imageUploadSuccess", "imageUploading", "quickToolbarClose", "quickToolbarOpen", "resizeStart", "resizeStop", "resizing", "slashMenuItemSelect", "toolbarClick", "toolbarStatusUpdate", "updatedToolbarStatus", "valueChange"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TaggingDirective, selector: "[bizdocTagging]", inputs: ["bizdocTagging"], outputs: ["bizdocTaggingChange"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: EditInputComponent, isStandalone: false, selector: "bizdoc-edit-text", inputs: { placeholder: "placeholder", text: "text", image: "image", resource: "resource", disabled: "disabled", autofocus: "autofocus", cache: "cache" }, outputs: { change: "change", onOk: "ok", onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "_rte", first: true, predicate: RichTextEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"column\">\r\n  @switch (mode) {\r\n  @case ('html') {\r\n  <ejs-richtexteditor [value]=\"text\"\r\n                      (change)=\"_htmlChange($event)\"\r\n                      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\r\n  }\r\n  @default {\r\n  <mat-form-field floatLabel=\"never\" class=\"flex\">\r\n    <textarea matInput cdkTextareaAutosize\r\n              [autofocus]=\"autofocus\"\r\n              [(bizdocTagging)]=\"resource\"\r\n              (keydown)=\"_key($event)\"\r\n              (input)=\"_textChange($event)\"\r\n              [value]=\"text\"\r\n              (paste)=\"_paste($event)\"\r\n              [placeholder]=\"placeholder ? (placeholder | translate) : null\"\r\n              (focus)=\"onFocus.emit()\"\r\n              (focusout)=\"onBlur.emit()\"\r\n              maxlength=\"2000\"\r\n              #textArea></textarea>\r\n  </mat-form-field>\r\n  }\r\n  }\r\n  <div class=\"row nav-toolbar\">\r\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n@if (_image) {\r\n<div>\r\n  <img [src]=\"'data:image/png;base64,'+ _image\" />\r\n  <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"], dependencies: [{ kind: "component", type: i2$a.RichTextEditorComponent, selector: "ejs-richtexteditor", inputs: ["autoSaveOnIdle", "backgroundColor", "bulletFormatList", "codeBlockSettings", "cssClass", "editorMode", "emojiPickerSettings", "enableAutoUrl", "enableHtmlEncode", "enableHtmlSanitizer", "enablePersistence", "enableResize", "enableRtl", "enableTabKey", "enableXhtml", "enabled", "enterKey", "exportPdf", "exportWord", "fileManagerSettings", "floatingToolbarOffset", "fontColor", "fontFamily", "fontSize", "format", "formatPainterSettings", "formatter", "height", "htmlAttributes", "iframeSettings", "importWord", "inlineMode", "insertAudioSettings", "insertImageSettings", "insertVideoSettings", "keyConfig", "locale", "maxLength", "numberFormatList", "pasteCleanupSettings", "placeholder", "quickToolbarSettings", "readonly", "saveInterval", "shiftEnterKey", "showCharCount", "showTooltip", "slashMenuSettings", "tableSettings", "toolbarSettings", "undoRedoSteps", "undoRedoTimer", "value", "valueTemplate", "width"], outputs: ["actionBegin", "actionComplete", "afterImageDelete", "afterMediaDelete", "afterPasteCleanup", "beforeDialogClose", "beforeDialogOpen", "beforeFileUpload", "beforeImageDrop", "beforeImageUpload", "beforePasteCleanup", "beforeQuickToolbarOpen", "beforeSanitizeHtml", "blur", "change", "created", "destroyed", "dialogClose", "dialogOpen", "fileRemoving", "fileSelected", "fileUploadFailed", "fileUploadSuccess", "fileUploading", "focus", "imageRemoving", "imageSelected", "imageUploadFailed", "imageUploadSuccess", "imageUploading", "quickToolbarClose", "quickToolbarOpen", "resizeStart", "resizeStop", "resizing", "slashMenuItemSelect", "toolbarClick", "toolbarStatusUpdate", "updatedToolbarStatus", "valueChange"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TaggingDirective, selector: "[bizdocTagging]", inputs: ["bizdocTagging"], outputs: ["bizdocTaggingChange"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EditInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-edit-text', template: "<div class=\"column\">\r\n  @switch (mode) {\r\n  @case ('html') {\r\n  <ejs-richtexteditor [value]=\"text\"\r\n                      (change)=\"_htmlChange($event)\"\r\n                      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\r\n  }\r\n  @default {\r\n  <mat-form-field floatLabel=\"never\" class=\"flex\">\r\n    <textarea matInput cdkTextareaAutosize [autofocus]=\"autofocus\"\r\n              [(bizdocTagging)]=\"resource\"\r\n              (keydown)=\"_key($event)\"\r\n              (input)=\"_textChange($event)\"\r\n              [value]=\"text\"\r\n              (paste)=\"_paste($event)\"\r\n              [placeholder]=\"placeholder ? (placeholder | translate) : null\"\r\n              (focus)=\"onFocus.emit()\"\r\n              (focusout)=\"onBlur.emit()\"\r\n              maxlength=\"2000\"\r\n              #textArea></textarea>\r\n  </mat-form-field>\r\n  }\r\n  }\r\n  <div class=\"row nav-toolbar\">\r\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n@if (_image) {\r\n<div>\r\n  <img [src]=\"'data:image/png;base64,'+ _image\" />\r\n  <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-edit-text', template: "<div class=\"column\">\r\n  @switch (mode) {\r\n  @case ('html') {\r\n  <ejs-richtexteditor [value]=\"text\"\r\n                      (change)=\"_htmlChange($event)\"\r\n                      [toolbarSettings]=\"toolbarSettings\"></ejs-richtexteditor>\r\n  }\r\n  @default {\r\n  <mat-form-field floatLabel=\"never\" class=\"flex\">\r\n    <textarea matInput cdkTextareaAutosize\r\n              [autofocus]=\"autofocus\"\r\n              [(bizdocTagging)]=\"resource\"\r\n              (keydown)=\"_key($event)\"\r\n              (input)=\"_textChange($event)\"\r\n              [value]=\"text\"\r\n              (paste)=\"_paste($event)\"\r\n              [placeholder]=\"placeholder ? (placeholder | translate) : null\"\r\n              (focus)=\"onFocus.emit()\"\r\n              (focusout)=\"onBlur.emit()\"\r\n              maxlength=\"2000\"\r\n              #textArea></textarea>\r\n  </mat-form-field>\r\n  }\r\n  }\r\n  <div class=\"row nav-toolbar\">\r\n    <button mat-icon-button (click)=\"_openDocument($event)\" [bizdocTooltip]=\"'Document'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>article</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openMention($event)\" [bizdocTooltip]=\"'Mention'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>alternate_email</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_openEmoji($event)\" [bizdocTooltip]=\"'Emoji'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\" [disabled]=\"mode !== 'text'\"><mat-icon>insert_emoticon</mat-icon></button>\r\n    <button mat-icon-button (click)=\"_toggleHtml()\" [bizdocTooltip]=\"'Text'|translate\" bizdocTooltipPosition=\"above\" class=\"tool\"><mat-icon>text_fields</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"_ok()\" [disabled]=\"disabled\" class=\"tool\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n@if (_image) {\r\n<div>\r\n  <img [src]=\"'data:image/png;base64,'+ _image\" />\r\n  <button mat-icon-button (click)=\"_clearImage()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n</div>\r\n}\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.mat-mdc-form-field{-ms-flex:1 auto;-webkit-flex:1 auto;flex:1 auto;padding:0 8px}.mat-mdc-form-field textarea{overflow:hidden}img{max-width:300px}\n"] }]
         }], ctorParameters: () => [{ type: Popup }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], text: [{
@@ -13479,8 +13555,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));
@@ -13489,29 +13565,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
@@ -13584,13 +13654,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]
@@ -13625,7 +13695,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();
@@ -13664,6 +13734,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);
@@ -13794,13 +13874,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]
@@ -18306,20 +18386,13 @@ class NotificationsService {
         });
     }
     markAsRead(id, date, read) {
-        return this._http.put(`/api/notifications/${id}?read=${read}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap(() => {
-            const { messagesCount, options: { notificationsView } } = this._session.profile;
-            if (!this._session.isImpersonating &&
-                notificationsView !== undefined &&
-                notificationsView < date)
-                this._session.profile.messagesCount = !messagesCount ? 0 :
-                    messagesCount - 1;
-        }));
+        return this._http.put(`/api/notifications/${id}?read=${read}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap(() => this._session.reportNotificationsRead(date, read ? -1 : 1)));
     }
     get(id) {
         return this._http.get(`/api/notifications/${id}`);
     }
     mute(id, mute) {
-        return this._http.put(`/api/notifications/${id}?mute=${mute}`, {});
+        return this._http.put(`/api/notifications/${id}?mute=${mute}`, {}).pipe(tap(() => { }));
     }
     delete(id) {
         return this._http.delete(`/api/notifications/${id}`);
@@ -19054,7 +19127,7 @@ class WindowTitleService {
             else
                 this._show(translate.get('NewFrom', i.model.number));
         });
-        hub.notify$.subscribe(n => !this._inFocus && this._show(n.model.title));
+        hub.newNotification$.subscribe(n => !this._inFocus && this._show(n.model.title));
         this._title = document.title;
     }
     set(value) {
@@ -19489,7 +19562,7 @@ class HomeBase {
                 playAudio('notification_simple-01');
         });
         //
-        this._messaging.notify$.subscribe(n => {
+        this._messaging.newNotification$.subscribe(n => {
             const { options: { notifications }, messages, messagesCount } = this._session.profile;
             notifications.sound && playAudio('notification_simple-01');
         });
@@ -19728,7 +19801,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
@@ -21039,7 +21112,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,
@@ -21194,7 +21267,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)
@@ -21679,7 +21752,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,
@@ -25155,7 +25228,7 @@ let RecentsWidget = class RecentsWidget {
         this.enableInsights = session.profile.views.length > 0;
     }
     ngOnInit() {
-        this._service.changed.pipe(takeUntil(this._destroy)).
+        this._service.recordChange$.pipe(takeUntil(this._destroy)).
             subscribe(m => {
             const item = this.dataSource.data.find(i => i.id === m.id);
             item &&
@@ -33014,7 +33087,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' })
@@ -35907,7 +35980,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' })