@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/home/sign/sign.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ImpersonateDialog } from '../../impersonate/impersonate.component';
+import { PromptService } from '../../core/prompt.service';
+import { PopupRef } from "../../core/popup/popup-ref";
+import { AuthenticationImpl } from '../../core/authentication';
+
+@Component({
+  templateUrl: './sign.component.html',
+})
+/** sign component*/
+export class QuickSignComponent {
+  /** options ctor */
+  constructor(private _ps: PromptService,
+    private _auth: AuthenticationImpl,
+    private _dialog: MatDialog,
+    private _popupRef: PopupRef<QuickSignComponent>) {
+  }
+  signOut() {
+    this._popupRef.close();
+    const task = () => {
+      this._ps.mask('Goodbye');
+      location.assign('/');
+    };
+    this._ps.ask('SignOutAsk', 'SignOut', { ok: 'Yes', cancel: 'No' }).subscribe(ok => {
+      if (ok) {
+        if (this._auth.signOut) this._auth.signOut().
+          then(task);
+        else task();
+      }
+    });
+  }
+  impersonate() {
+    this._popupRef.close();
+    this._dialog.open(ImpersonateDialog, { closeOnNavigation: true }).afterClosed().subscribe(ok => {
+      if (ok) {
+        this._ps.mask('Refreshing');
+        location.replace('/');
+      }
+    });
+  }
+}

package/src/lib/home/submenu.directive.exp.ts

@@ -0,0 +1,43 @@
+import { Directive, ElementRef, Injectable, Input, OnDestroy, OnInit } from "@angular/core";
+import { Subject, takeUntil } from "rxjs";
+import { PanesRouter } from "../core/slots/router.service";
+import { NavigationSelected, NavigationStart, ParamNavigation } from "../core/slots/pane-ref";
+
+@Injectable({ providedIn: 'root' })
+export
+  class SubmenuService {
+  readonly navigate = new Subject();
+}
+
+@Directive({ selector: 'submenuLink' })
+export class SubmenuLinkDirective implements OnInit, OnDestroy {
+    constructor(
+        private _element: ElementRef<HTMLElement>,
+        private _slotsRouter: PanesRouter,
+        private _service: SubmenuService
+    ) { }
+    private readonly _destroy = new Subject<void>();
+    ngOnInit(): void {
+        this._slotsRouter.events.pipe(takeUntil(this._destroy)).subscribe(e => {
+            if ((e instanceof NavigationStart || e instanceof ParamNavigation || e instanceof NavigationSelected))
+                this._toggle(e.pane.path.startsWith(this.path));
+        });
+        this._element.nativeElement.addEventListener('mouseenter', this._navigate.bind(this));
+    }
+    private _navigate() {
+        this._service.navigate.next(this.path);
+    }
+    private _toggle(mode: boolean) {
+        if (mode)
+            this._element.nativeElement.classList.add(this.active);
+        else
+            this._element.nativeElement.classList.remove(this.active);
+    }
+    @Input('submenuLink') path: string;
+    @Input('submenuLinkActive') active?: string = 'active';
+    ngOnDestroy(): void {
+        this._element.nativeElement.removeEventListener('mouseenter', this._navigate.bind(this));
+        this._destroy.next();
+        this._destroy.complete();
+    }
+}

package/src/lib/home/tools.component.html

@@ -0,0 +1,27 @@
+<input type="text"
+       [@search]="searching"
+       (@search.done)="searching && focus()"
+       #input
+       (keydown.escape)="collapse($event)"
+       [attr.aria-label]="'Search'|translate"
+       [formControl]="search"
+       [matAutocomplete]="auto" class="search-box">
+<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="goto($event)" [displayWith]="displayWith">
+  <mat-option *ngFor="let option of results | async" [value]="option">
+<ng-container *ngIf="option.section">
+  {{option.section}}
+  <mat-icon class="mat-icon-rtl-mirror" style="margin: 0;">chevron_right</mat-icon>
+</ng-container>
+    {{option.title}}
+  </mat-option> 
+</mat-autocomplete> 
+<button mat-icon-button (click)="open($event)" [matTooltip]="'Search'|translate" class="tool"><mat-icon>search</mat-icon></button>
+<button mat-icon-button (click)="notifs($event)" [matTooltip]="'Notifications'|translate" class="tool"
+        [attr.aria-label]="'Notifications'| translate"
+        data-help="notifications">
+  <mat-icon matListIcon [matBadge]="profile.notificationsCount" [matBadgeHidden]="profile.notificationsCount"
+            matBadgeColor="accent"
+            [class.filled]="profile.notificationsCount">
+    {{profile.options.notifications.active ? 'notifications':'notifications_off'}}
+  </mat-icon>
+</button>

package/src/lib/home/tools.component.scss

@@ -0,0 +1,15 @@
+:host {
+  padding-right: 8px;
+  padding-left: 8px;
+  /*  opacity: .1;
+
+  &:hover {
+    opacity: 1
+  }
+*/
+}
+
+input {
+  /*width: 300px;*/
+  font-size: large;
+}

package/src/lib/home/tools.component.ts

@@ -0,0 +1,72 @@
+import { ElementRef } from '@angular/core';
+import { ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { filter, map } from 'rxjs';
+import { Observable } from 'rxjs';
+import { searchAnimation } from '../core/animations';
+import { OpenPolicy } from '../core/configuration';
+import { isString } from '../core/functions';
+import { Profile } from '../core/models';
+import { Popup } from '../core/popup/popup.service';
+import { SessionService } from '../core/session.service';
+import { PanesRouter } from '../core/slots/router.service';
+import { QuickNotificationsComponent } from './notifications/notifications.component';
+import { Index, SearchService } from './search.service';
+
+/**
+ * Desktop home component
+ * */
+@Component({
+  selector: 'bizdoc-quicktools',
+  templateUrl: 'tools.component.html',
+  styleUrls: ['tools.component.scss'],
+  animations: [searchAnimation]
+})
+export class QuickToolsComponent implements OnInit {
+  @ViewChild('input') input: ElementRef<HTMLInputElement>;
+  @ViewChild('input', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
+  profile: Profile;
+  readonly search = new FormControl();
+  results: Observable<Index[]>;
+  constructor(
+    private _popup: Popup,
+    private _session: SessionService,
+    private _service: SearchService,
+    private _router: PanesRouter,
+  ) {
+    this.profile = _session.profile;
+  }
+  ngOnInit(): void {
+    this.results = this.search.valueChanges.pipe(filter(v => isString(v)), map(v => this._service.search(v)));
+  }
+  notifs(evt: Event) {
+    this.profile.notifications.length &&
+      this._session.notificationsTouch();
+    this._popup.open(QuickNotificationsComponent, evt.srcElement as HTMLElement, { position: 'start' });
+  }
+  searching = false;
+  open(evt: Event) {
+    if (this.searching) this.collapse(evt);
+    else {
+      this.searching = true;
+    }
+  }
+  collapse(evt: Event) {
+    this.searching = false;
+    this.trigger.closePanel();
+    evt.stopPropagation();
+  }
+  focus() {
+    this.input.nativeElement.focus();
+    this.search.setValue('');
+    setTimeout(()=> this.trigger.openPanel(), 200);
+  }
+  displayWith = _ => null;
+  goto(evt: MatAutocompleteSelectedEvent) {
+    const { path } = evt.option.value as Index;
+    this._router.navigate([path], { policy: OpenPolicy.Clear });
+    this.searching = false;
+  }
+}

package/src/lib/home/welcome/welcome.dialog.exp.ts

@@ -0,0 +1,35 @@
+import { Component } from "@angular/core";
+import { MatDialogRef } from "@angular/material/dialog";
+import { SessionService } from "../../core/session.service";
+import { GuideService } from "../../core/guide/guide.service";
+import { GuideStep } from "../../core/models";
+import { FormControl } from "@angular/forms";
+const WELCOME_GUIDE_NAME = 'welcome';
+@Component({
+  selector: 'bizdoc-welcome',
+  templateUrl: './welcome.dialog.html'
+})
+export class WelcomeDialog {
+  name: string;
+  hide = new FormControl(true);
+  constructor(dialogRef: MatDialogRef<WelcomeDialog>, private _session: SessionService,
+    private _guide: GuideService) {
+    this.name = _session.profile.name;
+    dialogRef.afterClosed().subscribe(() => {
+      if (this.hide.value)
+        _session.guide(WELCOME_GUIDE_NAME);
+    });
+  }
+  start() {
+    const steps: GuideStep[] = [
+      { selector: '[tourAnchor=compose]', content: 'ComposeHelp', title: 'Compose' },
+      { selector: '[tourAnchor=quicknotif]', content: 'NotificationsHelp', title: 'Notifications' },
+      { selector: '[tourAnchor=chat]', content: 'ChatHelp', title: 'Chat' },
+      { navigate: 'mailbox/f/ib', selector: '[tourAnchor=folder]', content: 'MailboxHelp', title: 'Mailbox' },
+      { navigate: 'dashboard', selector: '[tourAnchor=dashboard]', content: 'DashboardHelp', title: 'Dashboard' }
+    ];
+    if (this._session.profile.cubes.length)
+      steps.push({ navigate: `cube/${this._session.profile.cubes[0].name}/${this._session.profile.cubes[0].views[0].name}`, selector: '[tourAnchor=cube]', content: 'CubeHelp', title: 'Cube' });
+    this._guide.start({name: 'welcome', steps });
+  }
+}

package/src/lib/home/welcome/welcome.dialog.html

@@ -0,0 +1,14 @@
+<h2 mat-dialog-title style="display:flex;flex-direction:row">
+  {{'Welcome' | translate}}
+  <span class="divider"></span>
+  <button mat-icon-button mat-dialog-close [matTooltip]="'Close' | translate"><mat-icon>close</mat-icon></button>
+</h2>
+<mat-dialog-content class="mat-body-1">
+  <div [innerHTML]="'WelcomeMsg'|translate : name |sanitizeHtml"></div>
+  <br />
+</mat-dialog-content>
+<mat-dialog-actions style="display:flex;flex-direction:row">
+  <mat-checkbox [formControl]="hide"> {{'WelcomeHide' | translate}}</mat-checkbox>
+  <span class="divider"></span>
+  <button mat-button mat-dialog-close cdkFocusInitial color="accent" (click)="start()">{{'StartTour' | translate}}</button>
+</mat-dialog-actions>

package/src/lib/impersonate/impersonate.component.html

@@ -0,0 +1,17 @@
+<h2 mat-dialog-title>{{'Impersonate' | translate}}</h2>
+<mat-dialog-content>
+  <p class="mat-body-1">{{'ImpersonateHelp' | translate}}</p>
+  <mat-form-field>
+    <input matInput type="search" [matAutocomplete]="auto" [placeholder]="'Associate' | translate" required [formControl]="username"  />
+    <mat-autocomplete #auto="matAutocomplete" [displayWith]="display"
+                      (optionSelected)="change($event)">
+      <mat-option *ngFor="let u of users$ | async" [value]="u">
+        <span>{{u.name}}</span>
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-raised-button (click)="go()" [disabled]="!item || logging" color="primary">{{'Login' | translate}}</button>
+  <button mat-button [mat-dialog-close]>{{'Cancel' | translate }}</button>
+</mat-dialog-actions>

package/src/lib/impersonate/impersonate.component.scss

@@ -0,0 +1,3 @@
+.mat-form-field {
+  width: 100%
+}

package/src/lib/impersonate/impersonate.component.spec.ts

@@ -0,0 +1,24 @@
+import { TestBed, async, ComponentFixture, ComponentFixtureAutoDetect } from '@angular/core/testing';
+import { BrowserModule, By } from "@angular/platform-browser";
+import { ImpersonateDialog } from './impersonate.component';
+
+let component: ImpersonateDialog;
+let fixture: ComponentFixture<ImpersonateDialog>;
+
+describe('impersonate component', () => {
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ ImpersonateDialog ],
+            imports: [ BrowserModule ],
+            providers: [
+                { provide: ComponentFixtureAutoDetect, useValue: true }
+            ]
+        });
+        fixture = TestBed.createComponent(ImpersonateDialog);
+        component = fixture.componentInstance;
+    }));
+
+    it('should do something', async(() => {
+        expect(true).toEqual(true);
+    }));
+});

package/src/lib/impersonate/impersonate.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnDestroy } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { ENTER } from '@angular/cdk/keycodes';
+import { of, Subject } from 'rxjs';
+import { debounceTime, filter, map, shareReplay, switchMap, takeUntil } from 'rxjs/operators';
+import { UserInfo } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { PromptService } from '../core/prompt.service';
+import { isString } from '../core/functions';
+
+@Component({
+  selector: 'bizdoc-impersonate',
+  templateUrl: './impersonate.component.html',
+  styleUrls: ['./impersonate.component.scss']
+})
+/** impersonate component*/
+export class ImpersonateDialog implements OnDestroy {
+  readonly username = new FormControl(null, Validators.required);
+  private readonly _destroy = new Subject<void>();
+
+  private readonly _me = this._session.userId;
+
+  readonly users$ = this.username.valueChanges.pipe(debounceTime(250), takeUntil(this._destroy), switchMap(v =>
+    isString(v) ? this._session.mayImpersonate(v).pipe(
+      map(us => {
+        const name = v.toLowerCase();
+        return us.
+          filter(u => u.name.toLowerCase().indexOf(name) > -1 && u.id !== this._me);
+      })) : of([])));
+  logging = false;
+  item?: UserInfo;
+  /** impersonate ctor */
+  constructor(private _sb: PromptService, private _session: SessionService, private _dialogRef: MatDialogRef<ImpersonateDialog>) {
+    _dialogRef.keydownEvents().pipe(takeUntil(this._destroy), filter(k => k.keyCode === ENTER)).
+      subscribe(() =>
+        this.item && this.go());
+  }
+  go() {
+    this.logging = true;
+    this._session.impersonate(this.item.id).subscribe(() => {
+      this.logging = false;
+      this._dialogRef.close(true);
+    }, () => {
+      this.logging = false;
+      this._sb.error()
+    });
+  }
+  display(item: UserInfo) {
+    return item ? item.name : null;
+  }
+  change(evt: MatAutocompleteSelectedEvent) {
+    this.item = evt.option.value as UserInfo;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/linear-gauge.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core";
+import { LinearGaugeModule, AnnotationsService, GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
+
+
+@NgModule({
+    imports: [LinearGaugeModule],
+    exports: [LinearGaugeModule],
+    providers: [AnnotationsService, GaugeTooltipService]
+})
+export class SyncfusionLinearGaugeModule {
+}

package/src/lib/material.module.ts

@@ -0,0 +1,99 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
+import { MatChipsModule } from '@angular/material/chips';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { LayoutModule } from '@angular/cdk/layout';
+import { MatRippleModule, MatNativeDateModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatStepperIntl } from '@angular/material/stepper';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import { MatDatepickerIntl } from '@angular/material/datepicker';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { AppDateAdapter, StepperIntl, PaginatorIntl, DatepickerIntl } from './core/translate.service';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    CdkScrollableModule,
+    OverlayModule, PortalModule,
+    MatCardModule, MatGridListModule, MatStepperModule,
+    MatChipsModule, DragDropModule, MatRippleModule,
+    MatExpansionModule, MatButtonToggleModule, MatNativeDateModule,
+    MatDatepickerModule, MatTableModule, MatSortModule, MatPaginatorModule,
+    MatTabsModule, MatBadgeModule, MatTooltipModule, MatDialogModule,
+    MatRadioModule, MatBottomSheetModule, MatProgressBarModule,
+    MatProgressSpinnerModule, MatListModule, MatSidenavModule,
+    MatToolbarModule, MatAutocompleteModule, MatSelectModule,
+    MatSlideToggleModule, MatSnackBarModule, MatButtonModule,
+    MatCheckboxModule, MatInputModule,
+    MatFormFieldModule, MatIconModule, MatMenuModule, LayoutModule],
+  exports: [LayoutModule,
+    CdkScrollableModule,
+    OverlayModule, PortalModule, FlexLayoutModule,
+    MatChipsModule, DragDropModule,
+    MatCardModule, MatGridListModule,
+    MatRippleModule, MatStepperModule,
+    MatExpansionModule, MatButtonToggleModule, MatNativeDateModule, MatDatepickerModule,
+    MatTableModule, MatSortModule, MatPaginatorModule, MatTabsModule, MatBadgeModule,
+    MatTooltipModule, MatDialogModule, MatRadioModule, MatBottomSheetModule,
+    MatProgressBarModule, MatProgressSpinnerModule, MatListModule, MatSidenavModule,
+    MatToolbarModule, MatAutocompleteModule, MatSelectModule, MatSlideToggleModule,
+    MatSnackBarModule, MatButtonModule, MatCheckboxModule, MatInputModule, MatFormFieldModule,
+    MatIconModule, MatMenuModule],
+  providers: [
+    { useClass: StepperIntl, provide: MatStepperIntl },
+    { provide: MatPaginatorIntl, useClass: PaginatorIntl },
+    { provide: MatDatepickerIntl, useClass: DatepickerIntl },
+    {
+      provide: DateAdapter, useClass: AppDateAdapter
+    },
+    {
+      provide: MAT_DATE_FORMATS, useValue: {
+        parse: {
+          dateInput: 'LL',
+        },
+        display: {
+          dateInput: 'DD/MM/YYYY',
+          monthYearLabel: 'MMM YYYY',
+          dateA11yLabel: 'LL',
+          monthYearA11yLabel: 'MMMM YYYY',
+        }
+      }
+    }
+  ]
+})
+export class MaterialModule { }

package/src/lib/mobile.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+
+import { BrowseComponent } from './browse/browse.mobile.component';
+import { ChatComponent } from './chat/chat.mobile.component';
+import { ComposeComponent } from './compose/compose.mobile.component';
+import { CopyDialog } from './compose/copy/copy.dialog';
+import { FormSelectorSheet } from './compose/form-selector/form-selector.sheet';
+import { CubeMobileViewComponent } from './cube/view.mobile.component';
+import { NotificationsComponent } from './notifications/notifications.mobile.component';
+import { ReportComponent } from './reports/report.mobile.component';
+import { SchedulerComponent } from './scheduler/scheduler.mobile.component';
+import { HomeMobileComponent } from './home/home.mobile.component';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MomentModule } from 'ngx-moment';
+import { SharedModule } from './shared.module';
+import { CubeMatrixMobileComponent } from './cube/matrix/matrix.mobile.component';
+import { DocumentInfoPageComponent } from './compose/document.mobile.component';
+import { DocumentViewMobileComponent } from './views/views.mobile.component';
+
+@NgModule({
+  declarations: [DocumentInfoPageComponent, HomeMobileComponent, BrowseComponent, CubeMobileViewComponent, ComposeComponent, ReportComponent, FormSelectorSheet, CopyDialog, SchedulerComponent, NotificationsComponent,
+    ChatComponent, CubeMatrixMobileComponent, DocumentViewMobileComponent
+  ],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    RouterModule,
+    MomentModule,
+    SharedModule
+  ],
+  exports: [HomeMobileComponent, BrowseComponent, CubeMobileViewComponent, ComposeComponent, ReportComponent, FormSelectorSheet, CopyDialog, SchedulerComponent, NotificationsComponent,
+    ChatComponent]
+})
+export class MobileModule {
+}

package/src/lib/notifications/commented.notification.html

@@ -0,0 +1,14 @@
+<ng-container *ngIf='one else more'>
+  {{one.gender === 'Male' ? 'CommentedOneMaleNotify' : one.gender === 'Female' ? 'CommentedOneFemaleNotify' : 'CommentedOneNotify' | translate : one.name : notification.text : notification.number }}
+</ng-container>
+<ng-template #more>
+  <ng-container *ngIf='names'>
+    <ng-container *ngIf='names.length < 4'>
+      {{'CommentedManyNotify' | translate : translate.join(names) : notification.number }}
+    </ng-container>
+    <ng-container *ngIf='names.length >= 4'>
+      <!--[matTooltip]='translate.join(names)'-->
+      {{'CommentedManyMoreNotify' | translate : names.slice(0, 2).join(translate.get('JoinComma')) : names.length - 2 : notification.number}}
+    </ng-container>
+  </ng-container>
+</ng-template>

package/src/lib/notifications/commented.notification.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import { AccountService } from "../core/account.service";
+import { TranslateService } from "../core/translate.service";
+import { NOTIFICATION_DATA, NotificationBase } from "./notification-base";
+import { Notification } from "../core/models";
+import { SessionService } from "../core/session.service";
+import { ChatInfo } from "../chat/chat-info";
+import { RouterImpl } from "../core/router";
+
+/** */
+@Component({
+  template: `<ng-container *ngIf='message'>
+  <span *ngIf='notification.userIds.length < 3' [innerHTML]='message | sanitizeHtml'></span>
+  <span *ngIf='notification.userIds.length >= 3' [matTooltip]='names' [innerHTML]='message | sanitizeHtml'></span>
+</ng-container>`
+})
+export
+  class CommentedNotification extends NotificationBase implements OnInit {
+  names?: string;
+  message: string;
+  ngOnInit(): void {
+    if (this.notification.userIds.length === 1)
+      this._accounts.get(this.notification.userIds[0]).subscribe(u => {
+        this.message = this._translate.get(`CommentedOne${u.gender || ''}Notify`, this._formatUserElement(u), this.notification.text, this.notification.number);
+      });
+    else
+      this._accounts.getAll(this.notification.userIds).subscribe(us => {
+        if (us.length < 3)
+          this.message = this._translate.get('CommentedManyNotify',
+            this._translate.join(us.map(u => this._formatUserElement(u))), this.notification.number);
+        else {
+          const comma = this._translate.comma;
+          this.names = us.map(u => u.name).join(comma);
+          this.message = this._translate.get('CommentedManyMoreNotify',
+            us.slice(0, 2).map(u => this._formatUserElement(u)).join(comma), us.length - 2, this.notification.number);
+        }
+      });
+  }
+  constructor(@Inject(NOTIFICATION_DATA) public notification: Commented,
+    private _accounts: AccountService,
+    translate: TranslateService,
+    router: RouterImpl,
+    session: SessionService, chat: ChatInfo) {
+    super(notification, router, session, translate, chat);
+  }
+}
+interface Commented extends Notification {
+  userIds: string[];
+  text: string;
+  number: string;
+}

package/src/lib/notifications/cube-anomaly.notification.ts

@@ -0,0 +1,50 @@
+import { Component, Inject, OnInit, HostListener } from "@angular/core";
+import { NOTIFICATION_DATA } from "./notification-base";
+import { SessionService } from "../core/session.service";
+import { Cube } from "../core/models";
+import { Observable, forkJoin } from "rxjs";
+import { DatasourceService } from "../core/datasource.service";
+import { TranslateService } from "../core/translate.service";
+import { RouterImpl } from "../core/router";
+
+@Component({
+  template: `<span [innerHTML]=" 'CubeAnomalyNotify' | translate : (cube.title | lowercase) : (notification.value | currency : cube.currencyCode : 'symbol') : axes | sanitizeHtml"></span>`
+})
+export
+  class CubeAnomalyNotification implements OnInit {
+  cube: Cube;
+  axes = '';
+  ngOnInit(): void {
+    this.cube = this._session.profile.cubes.find(c => c.name === this.notification.cube);
+    const observables: Observable<string>[] = [];
+    this.cube.axes.forEach((a, i) => {
+      if (!a.hidden && this.notification.axes && this.notification.axes[i]) {
+        observables.push(this._ds.get(a.dataType, this.notification.axes[i]));
+      }
+    });
+    forkJoin(observables).subscribe(a =>
+      this.axes = this._translate.join(a.map((e, i) => e || this.notification.axes[i])));
+  }
+  @HostListener('click', ['$event'])
+  open(e: MouseEvent) {
+    const id = (e.srcElement as HTMLElement).getAttribute('data-info');
+    if (id) {
+      this._router.navigate(['mailbox/i', parseInt(id).encodeId()]);
+    }
+    else {
+      const params = {};
+      if (this.notification.axes) this.notification.axes.forEach((a, i) =>
+        a && (params[this.cube.axes[i].name] = a));
+      this._router.navigate(['cube', this.notification.cube, 'v', this.cube.views[0].name], { queryParams: params });
+    }
+  }
+  constructor(
+    @Inject(NOTIFICATION_DATA) public notification: CubeAnomaly,
+    private _ds: DatasourceService, private _session: SessionService, private _router: RouterImpl, private _translate: TranslateService) { }
+}
+interface CubeAnomaly extends Notification {
+  cube: string;
+  axes: string[];
+  value: number;
+  numbers: string[];
+}