@bizdoc/core 3.8.0 → 3.8.2

package/fesm2022/bizdoc-core.mjs

@@ -1136,6 +1136,35 @@ class SessionService {
         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;
+            messages.push(n.model);
+            this.profile.messagesCount = !messagesCount ? 1 :
+                messagesCount + 1;
+        });
+        //
+        _hub.updateNotify$.subscribe(e => {
+            const { originalRead, model: { id, sent, read } } = e, { messages, messagesCount } = 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);
+        });
+        //
+        _hub.new$.subscribe(m => {
+            const { userId, model: { folderId } } = m, { inboxCount, folders, userId: me } = this.profile;
+            if (userId !== me)
+                return;
+            this.profile.inboxCount = !inboxCount ? 1 :
+                inboxCount + 1;
+            const folder = folders.find(f => f.name === folderId);
+            folder.count = !folder.count ? 1 :
+                folder.count + 1;
+        });
     }
     /** */
     get tags() {
@@ -1151,10 +1180,11 @@ class SessionService {
     get accentPalette() {
         return this._accentpalette;
     }
-    isAboveWatermark(date) {
+    _isAboveWatermark(date) {
+        const { notificationsView } = this.profile.options;
         return !this.isImpersonating &&
-            this.profile.options.notificationsView !== undefined &&
-            this.profile.options.notificationsView < date;
+            notificationsView !== undefined &&
+            notificationsView < date;
     }
     get primeryPalette() {
         return this._primarypalette;
@@ -1835,6 +1865,7 @@ const STRINGS = {
         GrantAccess: 'Grant Access',
         GrantTip: 'View and take actions on your behalf',
         OutOfOfficeTip: 'Redirect mail on your absence',
+        DateRangeSameErr: 'Start date must be before end date',
         Timeline: 'Timeline',
         Theme: 'Theme',
         Back: 'Back',
@@ -2074,6 +2105,7 @@ const STRINGS = {
         MaxLengthErr: 'Maximum <strong>{0}</strong> length',
     },
     'he': {
+        DateRangeSameErr: 'ת. סיום חייב להיות אחרי ת. תחילה',
         Keyboard: 'קיצורי דרך',
         SettingThingsUp: 'אוסף נתונים',
         PleaseWait: 'אנא המתן/י',
@@ -3819,13 +3851,16 @@ class OptionsComponent {
                 };
             return null;
         };
-        this._laterThan = (control) => {
+        this._sameDate = (control) => {
             const parent = control.parent;
-            if (parent && parent.controls['from'].value && new Date(parent.controls['from'].value) ===
-                new Date(control.value))
-                return {
-                    later: true
-                };
+            if (control.value && parent) {
+                const from = parent.controls['from'].value;
+                if (new Date(from).valueOf() ===
+                    new Date(control.value).valueOf())
+                    return {
+                        same: true
+                    };
+            }
             return null;
         };
         this.grantUserIds = this._fb.control([]);
@@ -3856,7 +3891,7 @@ class OptionsComponent {
                 active: this._fb.control(false),
                 substitueId: this._fb.control(null, this._requiredValidator),
                 from: this._fb.control(null),
-                to: this._fb.control(null)
+                to: this._fb.control(null, this._sameDate)
             }),
             grantAccess: this._fb.group({
                 active: this._fb.control(false),
@@ -3877,8 +3912,8 @@ class OptionsComponent {
         }
         if (paneRef) {
             const section = paneRef.queryParams['section'];
-            if (section)
-                this.sectionIndex = 2;
+            if (section === 'ooo')
+                this.sectionTmpl = this.oooTmpl;
         }
         this.languages = this._session.languages;
         this.currentLanguage = this._session.language;
@@ -4058,11 +4093,11 @@ class OptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OptionsComponent, deps: [{ token: PromptService }, { token: GuideService }, { token: HubService }, { token: i2$2.MatDialog }, { token: i1$2.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: PaneRef, optional: true }, { token: SessionService }, { token: Popup }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "keyboard", first: true, predicate: ["keyboardTmpl"], descendants: true }, { propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n      @if (profile.byName) {\r\n      {{profile.byName}} \\\r\n      }\r\n      {{profile.name}}\r\n    </span>\r\n  </div>\r\n\r\n  <mat-divider />\r\n\r\n  <div class=\"row\">\r\n    <mat-nav-list class=\"nav-list\">\r\n      <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n        <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n        <span matListItemTitle>{{'Emails' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n        <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n        <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n        <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n    <div class=\"separator\"></div>\r\n    <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n      <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n    </form>\r\n  </div>\r\n  <mat-divider />\r\n  <!--themes-->\r\n  @if (themes.length > 1) {\r\n  <div class=\"row center\">\r\n    @for (t of themes; track t) {\r\n    <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (guides.length) {\r\n  <button mat-button [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\" [matMenuTriggerFor]=\"guidesMenu\">\r\n    {{'Help'|translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #guidesMenu>\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n  <div class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Tags'|translate}}</mat-label>\r\n      <mat-chip-grid #chips>\r\n        @for (tag of form.value.tags; track tag.name) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n          {{tag.name}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n             [matChipInputAddOnBlur]=\"true\"\r\n             (matChipInputTokenEnd)=\"addTag($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--guide-->\r\n<ng-template #guidesTmpl>\r\n  <mat-nav-list role=\"list\">\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n    <div formGroupName=\"extra\" class=\"column\">\r\n      @for(n of profile.notifications; track n.name) {\r\n      <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n      }\r\n    </div>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n  </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                        (optionSelected)=\"oooSelected($event)\">\r\n        @for (u of susers$ | async; track u.id) {\r\n        <mat-option [value]=\"u\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Dates'|translate}}</mat-label>\r\n      <mat-date-range-input [rangePicker]=\"oooDates\">\r\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field>\r\n      <mat-label>{{'Associates'| translate}}</mat-label>\r\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n        @for (u of form.value.grantAccess.users || []; track u.id) {\r\n        <mat-chip-row (removed)=\"removeGrant(u)\">\r\n          {{u | userName | async}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [formControl]=\"grantUserIds\"\r\n             #grantInput\r\n             [matAutocomplete]=\"grantAuto\"\r\n             [matChipInputFor]=\"grantList\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n        @for (u of gusers$ | async; track u.id) {\r\n        <mat-option [value]=\"u.id\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: "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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "keyboard", first: true, predicate: ["keyboardTmpl"], descendants: true }, { propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n      @if (profile.byName) {\r\n      {{profile.byName}} \\\r\n      }\r\n      {{profile.name}}\r\n    </span>\r\n  </div>\r\n\r\n  <mat-divider />\r\n\r\n  <div class=\"row\">\r\n    <mat-nav-list class=\"nav-list\">\r\n      <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n        <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n        <span matListItemTitle>{{'Emails' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n        <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n        <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n        <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n    <div class=\"separator\"></div>\r\n    <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n      <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n    </form>\r\n  </div>\r\n  <mat-divider />\r\n  <!--themes-->\r\n  @if (themes.length > 1) {\r\n  <div class=\"row center\">\r\n    @for (t of themes; track t) {\r\n    <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (guides.length) {\r\n  <button mat-button [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\" [matMenuTriggerFor]=\"guidesMenu\">\r\n    {{'Help'|translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #guidesMenu>\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n  <div class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Tags'|translate}}</mat-label>\r\n      <mat-chip-grid #chips>\r\n        @for (tag of form.value.tags; track tag.name) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n          {{tag.name}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n             [matChipInputAddOnBlur]=\"true\"\r\n             (matChipInputTokenEnd)=\"addTag($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--guide-->\r\n<ng-template #guidesTmpl>\r\n  <mat-nav-list role=\"list\">\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n    <div formGroupName=\"extra\" class=\"column\">\r\n      @for(n of profile.notifications; track n.name) {\r\n      <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n      }\r\n    </div>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n  </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                        (optionSelected)=\"oooSelected($event)\">\r\n        @for (u of susers$ | async; track u.id) {\r\n        <mat-option [value]=\"u\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Dates'|translate}}</mat-label>\r\n      <mat-date-range-input [rangePicker]=\"oooDates\" [min]=\"today\">\r\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\">\r\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      @if (form.controls.outOfOffice.controls.to.hasError('same')) {\r\n      <mat-error [innerHTML]=\"'DateRangeSameErr'|translate\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field>\r\n      <mat-label>{{'Associates'| translate}}</mat-label>\r\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n        @for (u of form.value.grantAccess.users || []; track u.id) {\r\n        <mat-chip-row (removed)=\"removeGrant(u)\">\r\n          {{u | userName | async}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [formControl]=\"grantUserIds\"\r\n             #grantInput\r\n             [matAutocomplete]=\"grantAuto\"\r\n             [matChipInputFor]=\"grantList\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n        @for (u of gusers$ | async; track u.id) {\r\n        <mat-option [value]=\"u.id\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: "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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n      @if (profile.byName) {\r\n      {{profile.byName}} \\\r\n      }\r\n      {{profile.name}}\r\n    </span>\r\n  </div>\r\n\r\n  <mat-divider />\r\n\r\n  <div class=\"row\">\r\n    <mat-nav-list class=\"nav-list\">\r\n      <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n        <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n        <span matListItemTitle>{{'Emails' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n        <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n        <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n        <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n    <div class=\"separator\"></div>\r\n    <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n      <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n    </form>\r\n  </div>\r\n  <mat-divider />\r\n  <!--themes-->\r\n  @if (themes.length > 1) {\r\n  <div class=\"row center\">\r\n    @for (t of themes; track t) {\r\n    <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (guides.length) {\r\n  <button mat-button [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\" [matMenuTriggerFor]=\"guidesMenu\">\r\n    {{'Help'|translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #guidesMenu>\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n  <div class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Tags'|translate}}</mat-label>\r\n      <mat-chip-grid #chips>\r\n        @for (tag of form.value.tags; track tag.name) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n          {{tag.name}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n             [matChipInputAddOnBlur]=\"true\"\r\n             (matChipInputTokenEnd)=\"addTag($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--guide-->\r\n<ng-template #guidesTmpl>\r\n  <mat-nav-list role=\"list\">\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n    <div formGroupName=\"extra\" class=\"column\">\r\n      @for(n of profile.notifications; track n.name) {\r\n      <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n      }\r\n    </div>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n  </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                        (optionSelected)=\"oooSelected($event)\">\r\n        @for (u of susers$ | async; track u.id) {\r\n        <mat-option [value]=\"u\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Dates'|translate}}</mat-label>\r\n      <mat-date-range-input [rangePicker]=\"oooDates\">\r\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field>\r\n      <mat-label>{{'Associates'| translate}}</mat-label>\r\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n        @for (u of form.value.grantAccess.users || []; track u.id) {\r\n        <mat-chip-row (removed)=\"removeGrant(u)\">\r\n          {{u | userName | async}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [formControl]=\"grantUserIds\"\r\n             #grantInput\r\n             [matAutocomplete]=\"grantAuto\"\r\n             [matChipInputFor]=\"grantList\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n        @for (u of gusers$ | async; track u.id) {\r\n        <mat-option [value]=\"u.id\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n      @if (profile.byName) {\r\n      {{profile.byName}} \\\r\n      }\r\n      {{profile.name}}\r\n    </span>\r\n  </div>\r\n\r\n  <mat-divider />\r\n\r\n  <div class=\"row\">\r\n    <mat-nav-list class=\"nav-list\">\r\n      <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n        <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n        <span matListItemTitle>{{'Emails' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n        <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n        <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n        <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n    <div class=\"separator\"></div>\r\n    <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n      <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n    </form>\r\n  </div>\r\n  <mat-divider />\r\n  <!--themes-->\r\n  @if (themes.length > 1) {\r\n  <div class=\"row center\">\r\n    @for (t of themes; track t) {\r\n    <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (guides.length) {\r\n  <button mat-button [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\" [matMenuTriggerFor]=\"guidesMenu\">\r\n    {{'Help'|translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #guidesMenu>\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n  <div class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Tags'|translate}}</mat-label>\r\n      <mat-chip-grid #chips>\r\n        @for (tag of form.value.tags; track tag.name) {\r\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n          {{tag.name}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [matChipInputFor]=\"chips\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n             [matChipInputAddOnBlur]=\"true\"\r\n             (matChipInputTokenEnd)=\"addTag($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--guide-->\r\n<ng-template #guidesTmpl>\r\n  <mat-nav-list role=\"list\">\r\n    @for (g of guides; track g.name) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n    <div formGroupName=\"extra\" class=\"column\">\r\n      @for(n of profile.notifications; track n.name) {\r\n      <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n      }\r\n    </div>\r\n    <div class=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n    <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n  </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field class=\"flex\">\r\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                        (optionSelected)=\"oooSelected($event)\">\r\n        @for (u of susers$ | async; track u.id) {\r\n        <mat-option [value]=\"u\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Dates'|translate}}</mat-label>\r\n      <mat-date-range-input [rangePicker]=\"oooDates\" [min]=\"today\">\r\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\">\r\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      @if (form.controls.outOfOffice.controls.to.hasError('same')) {\r\n      <mat-error [innerHTML]=\"'DateRangeSameErr'|translate\"></mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field>\r\n      <mat-label>{{'Associates'| translate}}</mat-label>\r\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n        @for (u of form.value.grantAccess.users || []; track u.id) {\r\n        <mat-chip-row (removed)=\"removeGrant(u)\">\r\n          {{u | userName | async}}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip-row>\r\n        }\r\n      </mat-chip-grid>\r\n      <input [formControl]=\"grantUserIds\"\r\n             #grantInput\r\n             [matAutocomplete]=\"grantAuto\"\r\n             [matChipInputFor]=\"grantList\"\r\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n        @for (u of gusers$ | async; track u.id) {\r\n        <mat-option [value]=\"u.id\">\r\n          {{u.name}}\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: GuideService }, { type: HubService }, { type: i2$2.MatDialog }, { type: i1$2.FormBuilder }, { type: AccountService }, { type: PromptService }, { type: PaneRef, decorators: [{
                     type: Optional
                 }] }, { type: SessionService }, { type: Popup }, { type: undefined, decorators: [{
@@ -7148,7 +7183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
 const DOCUMENT_MODEL = new InjectionToken('model');
 class MailboxService {
-    constructor(messaging, _session, _auth, _http) {
+    constructor(_session, _auth, _http) {
         this._session = _session;
         this._auth = _auth;
         this._http = _http;
@@ -7166,18 +7201,6 @@ class MailboxService {
                 this._change$.next(m);
             }));
         };
-        messaging.new$.
-            subscribe(m => {
-            if (m.userId !== _session.profile.userId)
-                return;
-            if (!_session.profile.inboxCount)
-                _session.profile.inboxCount = 0;
-            _session.profile.inboxCount++;
-            const folder = _session.profile.folders.find(f => f.name === m.model.folderId);
-            if (!folder.count)
-                folder.count = 0;
-            folder.count++;
-        });
     }
     async formatDownloadUrl(document, file) {
         let url = `/api/attachments/${document.documentId}/${file.id}`;
@@ -7203,12 +7226,12 @@ class MailboxService {
         return this._http.delete(`/api/attachments/${recipientId}/${fileId}`);
     }
     markAsRead(id, read, folderId, received) {
-        return this._http.put(`/api/mailbox/read/${id}`, undefined, { params: { read } }).pipe(tap(() => folderId && received && this._updateunreadcounter(received, folderId, read ? 1 : -1)));
+        return this._http.put(`/api/mailbox/read/${id}`, undefined, { params: { read } }).pipe(tap(() => folderId && received && this._updateUnreadWatermark(received, folderId, read ? 1 : -1)));
     }
     listComments(id, before) {
         return this._http.get(`/api/comments/${id}`, { params: { before: new Date(before).toJSON() } });
     }
-    updateRecipientTags(id, tags) {
+    updateTags(id, tags) {
         return this._http.put(`/api/mailbox/tag/${id}`, { tags }).pipe(tap(() => {
             this._change$.next({ id, tags });
         }));
@@ -7416,21 +7439,19 @@ class MailboxService {
      */
     get(id, read) {
         return this._http.get(`/api/mail/${id}`).pipe(tap((m) => read === false && m.read === true &&
-            this._updateunreadcounter(m.received, m.folderId, -1)));
+            this._updateUnreadWatermark(m.received, m.folderId, -1)));
     }
-    _updateunreadcounter(date, folderId, val) {
+    _updateUnreadWatermark(date, folderId, move) {
+        const { inboxCount, folders, options: { inboxView } } = this._session.profile;
         if (
         // date is above watermark
-        this._session.profile.options.inboxView &&
-            this._session.profile.options.inboxView < date) {
-            if (!this._session.profile.inboxCount)
-                this._session.profile.inboxCount = 0;
-            this._session.profile.inboxCount += val;
-        }
+        inboxView &&
+            inboxView < date)
+            this._session.profile.inboxCount = !inboxCount ? 0 :
+                inboxCount + move;
         // decrease
-        const folder = this._session.profile.folders.
-            find(f => f.name === folderId);
-        folder.count = Math.max(0, (folder.count || 0) + val);
+        const folder = folders.find(f => f.name === folderId);
+        folder.count = Math.max(0, (folder.count || 0) + move);
     }
     save(id, form, version, model, files) {
         //const fd = new FormData();
@@ -7466,7 +7487,7 @@ class MailboxService {
     delete(id) {
         return this._http.delete(`/api/mail/${id}`).pipe(tap(() => this._delete$.next(id)));
     }
-    toggleRemoveComment(id, value) {
+    toggleCommentHide(id, value) {
         return this._http.delete(`/api/comments/${id}?value=${value}`);
     }
     //post<T = any>(form: string, model?: T): Observable<RecipientModel<T>> {
@@ -7483,7 +7504,7 @@ class MailboxService {
         return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&go=true`, model, { params })), this._sync());
     }
     send(id, version, form, model, action, actionArgs, read, folderId, received) {
-        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&action=${action}`, model, { params: { ...params, ...actionArgs } })), tap(() => read === false && received && folderId && this._updateunreadcounter(received, folderId, -1)), this._sync());
+        return this._geoLocation(form).pipe(switchMap(params => this._http.put(`/api/mail/${id}?version=${version}&action=${action}`, model, { params: { ...params, ...actionArgs } })), tap(() => read === false && received && folderId && this._updateUnreadWatermark(received, folderId, -1)), this._sync());
     }
     listEvents(starting, ending, contains) {
         return this._http.get(`/api/events`, {
@@ -7527,13 +7548,13 @@ class MailboxService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MailboxService, deps: [{ token: HubService }, { token: SessionService }, { token: AuthenticationImpl }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MailboxService, deps: [{ token: SessionService }, { token: AuthenticationImpl }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MailboxService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MailboxService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: HubService }, { type: SessionService }, { type: AuthenticationImpl }, { type: i1.HttpClient }] });
+        }], ctorParameters: () => [{ type: SessionService }, { type: AuthenticationImpl }, { type: i1.HttpClient }] });
 function isHttpResponse(event) {
     return event.type === HttpEventType.Response;
 }
@@ -8119,10 +8140,9 @@ const FILTER_DEBOUNCE = 250;
 /** browse-filter component*/
 class BrowseFilterComponent {
     /** browse-filter ctor */
-    constructor(_fb, _session, _cd, _mailbox, _accounts, _config) {
+    constructor(_fb, _session, _mailbox, _accounts, _config) {
         this._fb = _fb;
         this._session = _session;
-        this._cd = _cd;
         this._mailbox = _mailbox;
         this._accounts = _accounts;
         this._config = _config;
@@ -8167,9 +8187,6 @@ class BrowseFilterComponent {
     ngAfterViewInit() {
         this.focus();
     }
-    displayName(val) {
-        return isObject(val) ? val.name : null;
-    }
     change(axis, evt) {
         this.form.get(axis).setValue(evt.option.value.key);
     }
@@ -8182,38 +8199,33 @@ class BrowseFilterComponent {
         cleanup(value);
         this.valuesChange.emit(value);
     }
-    toggleTag(evt) {
-        //const tag = (evt.value as Tag)?.name;
-        //this.form.controls.tags.setValue(this.form.controls.tags.value !== tag ? tag : null);
-    }
-    displayFn(item) {
-        return item ? item.name : undefined;
+    displayFn(person) {
+        return person ? person.name : undefined;
     }
     drop(evt) {
         evt.item.data;
     }
     senderSelected(e) {
-        const info = e.option.value;
-        this.form.patchValue({ senderId: info ? info.id : null });
+        const person = e.option.value;
+        this.form.patchValue({ senderId: person ? person.id : null });
     }
     focus() {
         if (this.containsEl)
-            this.containsEl.nativeElement.focus();
-        else if (this.senderEl)
-            this.senderEl.nativeElement.focus();
-        //this._cd.detectChanges();
+            this.containsEl.focus();
+        else
+            this.senderEl.focus();
     }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BrowseFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: MailboxService }, { token: AccountService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: BrowseFilterComponent, isStandalone: false, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "containsEl", first: true, predicate: ["contains"], descendants: true, read: ElementRef, static: true }, { propertyName: "senderEl", first: true, predicate: ["sender"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  <!--@if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" [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)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }-->\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayName\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u.id) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"stateId\" multiple>\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s.name) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"formId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f.name) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-label>{{'Received' | translate}}</mat-label>\r\n    <mat-date-range-input  [rangePicker]=\"datePicker\" [formGroup]=\"form\">\r\n      <input matStartDate [placeholder]=\"'StartDate'| translate\" formControlName=\"fromDate\">\r\n      <input matEndDate [placeholder]=\"'EndDate' | translate\" formControlName=\"toDate\">\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #datePicker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" [multiple]=true formControlName=\"tags\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag.name\" [highlighted]=false>\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: 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: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes", "autofocus"], outputs: ["axesChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BrowseFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: SessionService }, { token: MailboxService }, { token: AccountService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: BrowseFilterComponent, isStandalone: false, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "containsEl", first: true, predicate: ["contains"], descendants: true, read: MatInput, static: true }, { propertyName: "senderEl", first: true, predicate: ["sender"], descendants: true, read: MatInput, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  <!--@if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" [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)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }-->\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayFn\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u.id) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"stateId\" multiple>\r\n      <!--<mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>-->\r\n      @for (s of states; track s.name) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"formId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f.name) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-label>{{'Received' | translate}}</mat-label>\r\n    <mat-date-range-input  [rangePicker]=\"datePicker\" [formGroup]=\"form\">\r\n      <input matStartDate [placeholder]=\"'StartDate'| translate\" formControlName=\"fromDate\">\r\n      <input matEndDate [placeholder]=\"'EndDate' | translate\" formControlName=\"toDate\">\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #datePicker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" [multiple]=true formControlName=\"tags\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag.name\" [highlighted]=false>\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: 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: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes", "autofocus"], outputs: ["axesChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BrowseFilterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  <!--@if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" [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)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }-->\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayName\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u.id) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"stateId\" multiple>\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s.name) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"formId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f.name) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-label>{{'Received' | translate}}</mat-label>\r\n    <mat-date-range-input  [rangePicker]=\"datePicker\" [formGroup]=\"form\">\r\n      <input matStartDate [placeholder]=\"'StartDate'| translate\" formControlName=\"fromDate\">\r\n      <input matEndDate [placeholder]=\"'EndDate' | translate\" formControlName=\"toDate\">\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #datePicker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" [multiple]=true formControlName=\"tags\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag.name\" [highlighted]=false>\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SessionService }, { type: i0.ChangeDetectorRef }, { type: MailboxService }, { type: AccountService }, { type: undefined, decorators: [{
+            args: [{ standalone: false, selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  <!--@if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" [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)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }-->\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayFn\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u.id) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"stateId\" multiple>\r\n      <!--<mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>-->\r\n      @for (s of states; track s.name) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"formId\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f.name) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-label>{{'Received' | translate}}</mat-label>\r\n    <mat-date-range-input  [rangePicker]=\"datePicker\" [formGroup]=\"form\">\r\n      <input matStartDate [placeholder]=\"'StartDate'| translate\" formControlName=\"fromDate\">\r\n      <input matEndDate [placeholder]=\"'EndDate' | translate\" formControlName=\"toDate\">\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #datePicker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" [multiple]=true formControlName=\"tags\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag.name\" [highlighted]=false>\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SessionService }, { type: MailboxService }, { type: AccountService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
                 }] }], propDecorators: { values: [{
@@ -8229,10 +8241,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 args: [MatChipListbox, { static: true }]
             }], containsEl: [{
                 type: ViewChild,
-                args: ['contains', { static: true, read: ElementRef }]
+                args: ['contains', { static: true, read: MatInput }]
             }], senderEl: [{
                 type: ViewChild,
-                args: ['sender', { static: true, read: ElementRef }]
+                args: ['sender', { static: true, read: MatInput }]
             }] } });
 
 /** */
@@ -9343,7 +9355,7 @@ class BrowseItemsComponent {
         this._retrieve(mail).subscribe(item => {
             if (item.tags && item.tags.indexOf(tag) > -1)
                 return;
-            this._mailbox.updateRecipientTags(mail.id, item.tags).subscribe(() => {
+            this._mailbox.updateTags(mail.id, item.tags).subscribe(() => {
                 if (!item.tags)
                     item.tags = [tag];
                 else
@@ -9740,7 +9752,7 @@ class TagsComponent {
         setTimeout(() => this.inputElement.nativeElement.focus());
     }
     _save() {
-        this._mailbox.updateRecipientTags(this._data.id, this._data.tags.map(t => t.name)).subscribe();
+        this._mailbox.updateTags(this._data.id, this._data.tags.map(t => t.name)).subscribe();
     }
     add(event) {
         if (!this.auto.isOpen) {
@@ -13535,7 +13547,7 @@ class CommentComponent {
         return this._popup.open(component, this.bodyElement, { position: 'start', data });
     }
     delete(value) {
-        this._mailbox.toggleRemoveComment(this.item.id, value).subscribe({
+        this._mailbox.toggleCommentHide(this.item.id, value).subscribe({
             next: () => {
                 this.item.deleted = value;
                 this.deleted.emit(value);
@@ -18266,7 +18278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
 class NotificationsService {
-    constructor(_http, messaging, _session) {
+    constructor(_http, _session) {
         this._http = _http;
         this._session = _session;
     }
@@ -18287,13 +18299,14 @@ class NotificationsService {
             params
         });
     }
-    read(id, date, read) {
+    markAsRead(id, date, read) {
         return this._http.put(`/api/notifications/${id}?read=${read}`, {}, { headers: { 'no-progress': 'true' } }).pipe(tap(() => {
-            if (this._session.isAboveWatermark(date)) {
-                if (!this._session.profile.messagesCount)
-                    this._session.profile.messagesCount = 0;
-                this._session.profile.messagesCount--;
-            }
+            const { messagesCount, options: { notificationsView } } = this._session.profile;
+            if (!this._session.isImpersonating &&
+                notificationsView !== undefined &&
+                notificationsView < date)
+                this._session.profile.messagesCount = !messagesCount ? 0 :
+                    messagesCount - 1;
         }));
     }
     get(id) {
@@ -18305,13 +18318,13 @@ class NotificationsService {
     delete(id) {
         return this._http.delete(`/api/notifications/${id}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NotificationsService, deps: [{ token: i1.HttpClient }, { token: HubService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NotificationsService, deps: [{ token: i1.HttpClient }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NotificationsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NotificationsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: HubService }, { type: SessionService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: SessionService }] });
 
 class NotificationsComponentBase {
     constructor() {
@@ -18414,7 +18427,7 @@ class NotificationsTableComponent extends NotificationsComponentBase {
     }
     read(item, read) {
         if (item.read !== read)
-            this._service.read(item.id, item.sent, read).subscribe(() => item.read = read);
+            this._service.markAsRead(item.id, item.sent, read).subscribe(() => item.read = read);
     }
     isMuted(item) {
         return this._service.get(item.id).pipe(map(i => i.muted));
@@ -19459,43 +19472,29 @@ class HomeBase {
             const { model: { formId: name, subject, number, pending } } = m;
             if (!pending)
                 return;
-            const form = this._session.profile.forms.find(f => f.name === name), msg = this._translate.get('NewMail', form.title, number, subject || '');
-            this._snackBar.open(msg, m.userId === this._session.profile.userId ? this._translate.get('OpenNew') : undefined, {
+            const { userId, forms, options: { notifications } } = this._session.profile;
+            const form = forms.find(f => f.name === name), msg = this._translate.get('NewMail', form.title, number, subject || ''), action = m.userId === userId ? this._translate.get('OpenNew') : undefined;
+            this._snackBar.open(msg, action, {
                 duration: 5000,
                 direction: this._session.direction,
                 politeness: 'assertive'
-            }).onAction().subscribe(() => this.onNewMessage(m.model));
-            this._session.profile.options.notifications.sound &&
+            }).onAction().subscribe(() => this.navToMessage(m.model));
+            notifications.sound &&
                 playAudio('notification_simple-01');
         });
+        //
         this._messaging.notify$.subscribe(n => {
-            this._session.profile.options.notifications.sound &&
-                playAudio('notification_simple-01');
-            this._session.profile.messages.push(n.model);
-            if (!this._session.profile.messagesCount)
-                this._session.profile.messagesCount = 0;
-            this._session.profile.messagesCount++;
-        });
-        this._messaging.updateNotify$.subscribe(e => {
-            const item = this._session.profile.messages.find(n => n.id === e.model.id);
-            if (item)
-                Object.assign(item, e.model);
-            else
-                this._session.profile.messages.push(e.model);
-            if (e.originalRead !== undefined && e.model.read !== e.originalRead &&
-                this._session.isAboveWatermark(e.model.sent)) {
-                const val = e.model.read ? -1 : 1;
-                if (!this._session.profile.messagesCount)
-                    this._session.profile.messagesCount = 0;
-                this._session.profile.messagesCount += val;
-            }
+            const { options: { notifications }, messages, messagesCount } = this._session.profile;
+            notifications.sound && playAudio('notification_simple-01');
         });
+        //
         if (this._session.isImpersonating)
             this._snackBar.open(this._translate.get('Impersonating', this._session.profile.name), undefined, {
                 duration: TOAST_DURATION,
                 verticalPosition: 'top',
                 direction: this._session.direction
             });
+        //
         else if (this._session.isOutOfOffice) {
             const options = this._session.profile.options.outOfOffice;
             this._snackBar.openFromComponent(OutOfOfficeToast, {
@@ -19592,7 +19591,7 @@ class QuickNotificationsComponent extends NotificationsComponentBase {
     open(item, evt) {
         if (evt.target.tagName !== 'MAT-ICON') {
             if (!item.read)
-                this._service.read(item.id, item.sent, true).subscribe(() => item.read = true);
+                this._service.markAsRead(item.id, item.sent, true).subscribe(() => item.read = true);
             this._popupRef.close();
         }
     }
@@ -21331,7 +21330,7 @@ class HomeComponent extends HomeBase {
         this.subMenu = null;
         this.collapseSubMenu();
     }
-    onNewMessage(model) {
+    navToMessage(model) {
         this._router.navigate(['mailbox/i', model.id.encodeId()], {
             state: { item: model },
             policy: OpenPolicy.Clear
@@ -21633,7 +21632,7 @@ class HomeMobileComponent extends HomeBase {
             setTimeout(() => this.composeState = 'done', 500);
         });
     }
-    onNewMessage(model) {
+    navToMessage(model) {
         this._router.navigate(['mailbox/i', model.id.encodeId()], {
             state: { item: model }
         });
@@ -33846,11 +33845,23 @@ class ProfileSettingsDialog {
         this.isMobile = isMobile();
         this.substitute = this._fb.control(null);
         this.grants = this._fb.control([]);
+        this._sameDate = (control) => {
+            const parent = control.parent;
+            if (control.value && parent) {
+                const from = parent.controls['from'].value;
+                if (new Date(from).valueOf() ===
+                    new Date(control.value).valueOf())
+                    return {
+                        same: true
+                    };
+            }
+            return null;
+        };
         this.outOfOffice = this._fb.group({
             active: this._fb.control(false),
-            substitueId: this._fb.control(null),
+            substitueId: this._fb.control(null, Validators.required),
             from: this._fb.control(null),
-            to: this._fb.control(null)
+            to: this._fb.control(null, this._sameDate)
         });
         this.grantAccess = this._fb.group({
             active: this._fb.control(false),
@@ -33950,11 +33961,11 @@ class ProfileSettingsDialog {
         this.form.patchValue({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ProfileSettingsDialog, deps: [{ token: AccountService }, { token: i2$2.MatDialogRef }, { token: i1$2.FormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ProfileSettingsDialog, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          @for (u of ousers$ | async; track u) {\r\n          <mat-option [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required>\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      </mat-form-field>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field>\r\n        <mat-label>{{'Associates'|translate}}</mat-label>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          @for (u of grantAccess.value.users || []; track u) {\r\n          <mat-chip-row [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n          }\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          @for (u of gusers$ | async; track u) {\r\n          <mat-option [value]=\"u.id\">\r\n            {{u.name}}\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: 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$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "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: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ProfileSettingsDialog, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          @for (u of ousers$ | async; track u.id) {\r\n          <mat-option [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required [min]=\"today\">\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        @if (outOfOffice.controls.to.hasError('same')) {\r\n        <mat-error [innerHTML]=\"'DateRangeSameErr'|translate\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field>\r\n        <mat-label>{{'Associates'|translate}}</mat-label>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          @for (u of grantAccess.value.users || []; track u) {\r\n          <mat-chip-row [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n          }\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          @for (u of gusers$ | async; track u) {\r\n          <mat-option [value]=\"u.id\">\r\n            {{u.name}}\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "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: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ProfileSettingsDialog, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          @for (u of ousers$ | async; track u) {\r\n          <mat-option [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required>\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      </mat-form-field>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field>\r\n        <mat-label>{{'Associates'|translate}}</mat-label>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          @for (u of grantAccess.value.users || []; track u) {\r\n          <mat-chip-row [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n          }\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          @for (u of gusers$ | async; track u) {\r\n          <mat-option [value]=\"u.id\">\r\n            {{u.name}}\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
+            args: [{ standalone: false, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          @for (u of ousers$ | async; track u.id) {\r\n          <mat-option [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required [min]=\"today\">\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        @if (outOfOffice.controls.to.hasError('same')) {\r\n        <mat-error [innerHTML]=\"'DateRangeSameErr'|translate\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field>\r\n        <mat-label>{{'Associates'|translate}}</mat-label>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          @for (u of grantAccess.value.users || []; track u) {\r\n          <mat-chip-row [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n          }\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          @for (u of gusers$ | async; track u) {\r\n          <mat-option [value]=\"u.id\">\r\n            {{u.name}}\r\n          </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$2.MatDialogRef }, { type: i1$2.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]