@bizdoc/core 3.8.7 → 3.8.9

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 { BehaviorSubject, Subject, firstValueFrom, of, forkJoin, filter, map as map$1, merge, takeUntil as takeUntil$1, shareReplay as shareReplay$1, Observable, from, interval, switchMap as switchMap$1, isObservable, catchError as catchError$1, startWith as startWith$1, EMPTY, debounceTime as debounceTime$1 } from 'rxjs';
 import { 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';
@@ -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,77 @@ 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 (messagesCount === undefined)
+            messagesCount = 0;
+        messagesCount += move;
+        this._profile.messagesCount = messagesCount;
+        this._messagesCount$.next(messagesCount);
+    }
+    _stepInboxCount(move) {
+        let { inboxCount } = this._profile;
+        if (inboxCount === undefined)
+            inboxCount = 0;
+        inboxCount += move;
+        this._profile.inboxCount = inboxCount;
+        this._inboxCount$.next(inboxCount);
+    }
     /** */
     get tags() {
         return this._tags || (this._tags =
@@ -1207,7 +1238,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 +1316,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 +1351,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 +1411,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 +1432,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 +7220,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 +7265,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 +7279,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 +7391,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 +7439,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 +7473,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 +7528,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}`);
@@ -7917,20 +7958,22 @@ class MaterialModule {
             {
                 provide: DateAdapter, useClass: DayJsDateAdapter,
                 deps: [MAT_DATE_LOCALE, Platform]
-            },
+            } /*,
             {
-                provide: MAT_DATE_FORMATS, useValue: {
-                    parse: {
-                        dateInput: 'LL',
-                    },
-                    display: {
-                        dateInput: 'DD/MM/YYYY',
-                        monthYearLabel: 'MMM YYYY',
-                        dateA11yLabel: 'LL',
-                        monthYearA11yLabel: 'MMMM YYYY',
-                    }
+              provide: MAT_DATE_FORMATS, useValue: {
+                parse: {
+                  dateInput: 'LL',
+                },
+                display: {
+                  dateInput: 'DD/MM/YYYY',
+                  monthYearLabel: 'MMM YYYY',
+                  dateA11yLabel: 'LL',
+                  monthYearA11yLabel: 'MMMM YYYY',
+                  timeInput: 'HH:mm',
+                  timeOptionLabel: { hour: 'numeric', minute: 'numeric' },
                 }
-            }
+              }
+            }*/
         ], imports: [CommonModule,
             CdkScrollableModule,
             OverlayModule, PortalModule,
@@ -7998,20 +8041,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         {
                             provide: DateAdapter, useClass: DayJsDateAdapter,
                             deps: [MAT_DATE_LOCALE, Platform]
-                        },
+                        } /*,
                         {
-                            provide: MAT_DATE_FORMATS, useValue: {
-                                parse: {
-                                    dateInput: 'LL',
-                                },
-                                display: {
-                                    dateInput: 'DD/MM/YYYY',
-                                    monthYearLabel: 'MMM YYYY',
-                                    dateA11yLabel: 'LL',
-                                    monthYearA11yLabel: 'MMMM YYYY',
-                                }
+                          provide: MAT_DATE_FORMATS, useValue: {
+                            parse: {
+                              dateInput: 'LL',
+                            },
+                            display: {
+                              dateInput: 'DD/MM/YYYY',
+                              monthYearLabel: 'MMM YYYY',
+                              dateA11yLabel: 'LL',
+                              monthYearA11yLabel: 'MMMM YYYY',
+                              timeInput: 'HH:mm',
+                              timeOptionLabel: { hour: 'numeric', minute: 'numeric' },
                             }
-                        }
+                          }
+                        }*/
                     ]
                 }]
         }] });
@@ -8952,7 +8997,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;
@@ -9255,7 +9300,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);
@@ -9274,7 +9319,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);
@@ -9863,7 +9908,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));
     }
@@ -10375,13 +10420,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 => {
@@ -12833,6 +12878,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);
@@ -12960,13 +13010,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) {
@@ -12976,14 +13031,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();
         }
@@ -13012,7 +13070,7 @@ class TaggingDirective {
      * @param comp
      * @param value
      */
-    _popup(comp, value = '') {
+    _popup(comp, value) {
         this._instance &&
             this._close();
         const position = this._overlay.position().
@@ -13061,13 +13119,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: [{
@@ -13082,7 +13147,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: [{
@@ -13272,11 +13339,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: [{
@@ -18302,20 +18369,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}`);
@@ -19050,7 +19110,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) {
@@ -19485,7 +19545,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');
         });
@@ -25151,7 +25211,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 &&
@@ -31463,16 +31523,21 @@ registerComponents(CONTROLS_COMPONENTS$1);
 /* Syncfusion 30.x */
 registerLicense('Ngo9BigBOggjHTQxAR8/V1JEaF5cXmRCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdmWXhecXRdRmdYWUVyW0FWYEk=');
 function materialFormatsProvider(formats) {
+    const { date, time } = formats || {};
     return {
         provide: MAT_DATE_FORMATS, useValue: {
             parse: {
                 dateInput: 'LL',
+                timeInput: 'HH:mm',
             },
             display: {
-                dateInput: (formats || {}).date || 'll',
+                dateInput: date || 'll',
                 monthYearLabel: 'MMM YYYY',
                 dateA11yLabel: 'LL',
                 monthYearA11yLabel: 'MMMM YYYY',
+                monthLabel: 'MMM',
+                timeInput: time || 'HH:mm',
+                timeOptionLabel: 'HH:mm',
             }
         }
     };