@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,105 @@
+import { Component, ViewChild, Inject, OnInit, Injector } from '@angular/core';
+import { RouterOutlet, NavigationStart, ActivationEnd, Router } from '@angular/router';
+import { MatSidenav } from '@angular/material/sidenav';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Directionality } from '@angular/cdk/bidi';
+import { first } from 'rxjs/operators';
+import { BizDocConfig, BIZDOC_CONFIG } from '../core/configuration';
+import { fabAnimation } from '../core/animations';
+import { Contact, RecipientModel } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { HubService } from '../core/hub.service';
+import { TranslateService } from '../core/translate.service';
+import { FormSelectorSheet } from '../compose/form-selector/form-selector.sheet';
+import { Popup } from '../core/popup/popup.service';
+import { HomeBase } from './home-base.component';
+import { ChatInfo } from '../chat/chat-info';
+/** home comp */
+@Component({
+  selector: 'bizdoc-mobile-home',
+  templateUrl: './home.mobile.component.html',
+  styleUrls: ['./home.mobile.component.scss'],
+  animations: [fabAnimation]
+})
+export class HomeMobileComponent extends HomeBase implements OnInit {
+  mode: 'chat' | 'notifications';
+  composeState: 'working' | 'done';
+  contact: Contact;
+  composeEnabled: boolean;
+  @ViewChild(MatSidenav, { static: true }) menuDrawer: MatSidenav;
+  @ViewChild('secondaryDrawer', { static: true }) secondaryDrawer: MatSidenav;
+  constructor(
+    injector: Injector,
+    private _router: Router,
+    private _bs: MatBottomSheet,
+    private _dir: Directionality,
+    session: SessionService,
+    popup: Popup,
+    messaging: HubService,
+    translate: TranslateService,
+    snackBar: MatSnackBar,
+    chat: ChatInfo,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    super(popup, session, messaging, translate, snackBar, injector, config);
+    _router.initialNavigation();
+    chat._open$.subscribe(e => {
+      this.mode = 'chat';
+      this.contact = this._session.profile.contacts.find(c => c.id == e);
+    });
+  }
+  ngOnInit() {
+    super.ngOnInit();
+    this._router.events.subscribe(e => {
+      // close menu when xs
+      if (e instanceof NavigationStart) {
+        this.menuDrawer.close();
+      }
+      // enable compose on mobile per route
+      else if (e instanceof ActivationEnd) {
+        if (e.snapshot.children.length === 0)
+          this.composeEnabled = (e as ActivationEnd).snapshot.data['compose'];
+      }
+    });
+  }
+  compose() {
+    this._bs.open(FormSelectorSheet, {
+      autoFocus: true,
+      direction: this._dir.value
+    }).instance.done.
+      pipe(first()).subscribe(() => {
+        this.composeState = 'working';
+        setTimeout(() => this.composeState = 'done', 500)
+      });
+  }
+  onNewMessage(model: RecipientModel<any>) {
+    this._router.navigate(['mailbox/i', model.id.encodeId()],
+      {
+        state: { item: model }
+      });
+  }
+  chat() {
+    this.mode = 'chat';
+    if (this.secondaryDrawer.opened) {
+      if (this.contact) this.contact = null;
+      else this.close();
+    }
+    else this.open();
+  }
+  private open() {
+    this.secondaryDrawer.open().then(this.resize);
+  }
+
+  private close() {
+    this.secondaryDrawer.close().then(this.resize);
+  }
+  getAnimation(outlet: RouterOutlet): string {
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+  }
+
+  notifs() {
+    super.notifs();
+    this.mode = 'notifications';
+    this.secondaryDrawer.toggle().then(this.resize);
+  }
+}

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

@@ -0,0 +1,18 @@
+<mat-nav-list role="list">
+  <!--dense-->
+  <mat-list-item role="listitem" *ngFor="let n of notifications | sort: 'sent' : 'desc' | slice:0:9; let i=index" class="item" [class.read]="n.read" (click)="open(n, $event)">
+    <h3 *ngComponentOutlet="n.comp; injector: n.injector" matLine></h3>
+    <p matLine><span [bizdocTooltip]="n.sent | amCalendar">{{n.sent | amTimeAgo }}</span></p>
+    <button mat-icon-button [matMenuTriggerFor]="options" [matMenuTriggerData]="{muted: false}" class="tool"><mat-icon>more_vert</mat-icon></button>
+    <mat-menu #options>
+      <ng-template matMenuContent let-muted="muted">
+        <button mat-menu-item (click)="mute(n, true)">{{ (!(muted | async) ? 'Mute': 'Unmute') | translate}}</button>
+      </ng-template>
+    </mat-menu>
+  </mat-list-item>
+</mat-nav-list>
+<div class="tools row">
+  <a (click)="all()">{{'ShowAll'|translate}}</a>&nbsp;
+  <span class="divider"></span>
+  <a (click)='options()'>{{'Options'|translate}}</a>
+</div>

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

@@ -0,0 +1,36 @@
+:host {
+  /*width: 100%;*/
+  /*max-width: 350px*/
+  /*  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+*/
+}
+
+.item {
+  &.read {
+  }
+
+  .tool {
+    opacity: .1
+  }
+
+  &:hover .tool {
+    opacity: 1
+  }
+}
+
+/*mat-list-item button {
+  visibility: hidden;
+}
+
+mat-list-item:hover button {
+  visibility: visible
+}*/
+
+.tools {
+  font-variant-caps: all-small-caps;
+  font-size: medium;
+  padding: 8px
+}

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

@@ -0,0 +1,55 @@
+import { Component, Injector, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Notification } from '../../core/models';
+import { NotificationExtra, NotificationsComponentBase } from "../../notifications/notifications.component-base";
+import { SessionService } from '../../core/session.service';
+import { NotificationsService } from '../../notifications/notifications.service';
+import { OptionsService } from "../../options/options.service";
+import { PopupRef } from "../../core/popup/popup-ref";
+import { PanesRouter } from '../../core/slots/router.service';
+
+@Component({
+  selector: 'bizdoc-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss']
+})
+/** notifications component*/
+export class QuickNotificationsComponent extends NotificationsComponentBase implements OnInit {
+  notifications: NotificationExtra[];
+  /** notifications ctor */
+  constructor(private _popupRef: PopupRef<QuickNotificationsComponent>,
+    private _router: PanesRouter,
+    private _service: NotificationsService, private _session: SessionService, injector: Injector,
+    private _options: OptionsService) {
+    super(injector);
+  }
+  ngOnInit(): void {
+    this.notifications = this._session.profile.notifications as NotificationExtra[];
+    this.notifications.forEach(n => {
+      n.comp = this._comp(n.type);
+      n.injector = this._getInjector(n);
+    });
+  }
+  open(item: Notification, evt: MouseEvent) {
+    if ((evt.srcElement as HTMLElement).tagName !== 'MAT-ICON') {
+      if (!item.read)
+        this._service.read(item.id, item.sent, true).subscribe(() => item.read = true);
+      this._popupRef.close();
+    }
+  }
+  options() {
+    this._popupRef.close();
+    this._options.open('notifications');
+  }
+  all() {
+    this._popupRef.close();
+    this._router.navigate(['notifications']);
+  }
+  isMuted(item: Notification): Observable<boolean> {
+    return this._service.get(item.id).pipe(map(i => i.mute));
+  }
+  mute(item: Notification, mute: boolean) {
+    this._service.mute(item.id, mute);
+  }
+}

package/src/lib/home/options/_options-theme.scss

@@ -0,0 +1,11 @@
+@mixin options-theme($theme) {
+  $accent: mat.get-color-from-palette($theme, accent);
+  $gray: mat.define-palette(mat.$gray-palette);
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+
+  .profile-name {
+    color: if($is-dark-theme, white, black);
+  }
+}

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

@@ -0,0 +1,41 @@
+<div fxLayout="column">
+  <div class="profile-name">
+    <span class="mat-title">
+    <ng-container *ngIf="by">{{by}} \ </ng-container>
+    {{name}}</span>
+  </div>
+  <div fxLayoutAlign="center center" *ngIf="themes.length > 1">
+    <button *ngFor="let t of themes" (click)="changeTheme(t)" mat-icon-button class="theme" [style.background]="t.color" [class.active]="t.name === theme" [class.dark]="t.dark"></button>
+  </div>
+</div>
+<mat-nav-list role="list">
+  <mat-list-item role="listitem" *ngIf="!online" (click)="revive()">
+    <mat-icon [bizdocTooltip]="'Connect'|translate">wifi_off</mat-icon>
+  </mat-list-item>
+  <mat-list-item role="listitem" *ngIf="online" [matMenuTriggerFor]="availability">
+    {{'ShowAs' | translate : (available | translate | lowercase)}}
+  </mat-list-item>
+  <mat-menu #availability>
+    <button mat-menu-item *ngFor="let m of modes" (click)="setAvailable(m)">{{m | translate}}</button>
+  </mat-menu>
+  <mat-divider></mat-divider>
+  <mat-list-item role="listitem" (click)="options()">
+    {{'Options' | translate}}
+  </mat-list-item>
+  <mat-list-item role="listitem" [matMenuTriggerFor]="language">
+    {{'ChangeLanguage' | translate}}
+  </mat-list-item>
+  <mat-menu #language>
+    <button mat-menu-item *ngFor="let l of languages" (click)="changeLanguage(l)">{{l | translate}}</button>
+  </mat-menu>
+  <mat-divider></mat-divider>
+  <mat-list-item role="listitem" [matMenuTriggerFor]="help">
+    {{'Help' | translate}}
+    <span [matBadge]="guidesCount" matBadgeColor="accent" matBadgeOverlap="false" matBadgeSize="small"></span>
+  </mat-list-item>
+  <mat-menu #help>
+    <button mat-menu-item *ngFor="let g of guides" (click)="guide(g.name)">{{g.title}}</button>
+  </mat-menu>
+  <mat-divider></mat-divider>
+  <mat-list-item role="listitem" (click)="about()">{{ 'About' | translate}}</mat-list-item>
+</mat-nav-list>

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

@@ -0,0 +1,16 @@
+.profile-name {
+  margin: 8px;
+}
+
+.theme {
+  height: 22px;
+  width: 22px;
+  -moz-border-radius: 13px 13px;
+  -webkit-border-radius: 13px 13px;
+  border-radius: 13px 13px;
+  margin: 4px;
+
+  &.active.dark {
+    border: 2px solid #f4f4f4;
+  }
+}

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

@@ -0,0 +1,95 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+import { takeUntil, startWith } from 'rxjs/operators';
+import { HubConnectionState } from '@microsoft/signalr';
+import { AvailabilityState, Guide } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+import { OptionsService } from "../../options/options.service";
+import { PromptService } from '../../core/prompt.service';
+import { GuideService } from '../../core/guide/guide.service';
+import { HubService } from '../../core/hub.service';
+import { AboutDialog } from '../about/about.dialog';
+import { PopupRef } from "../../core/popup/popup-ref";
+import { Theme } from '../../core/configuration';
+
+@Component({
+  selector: 'bizdoc-quick-options',
+  templateUrl: './options.component.html',
+  styleUrls: ['./options.component.scss'],
+})
+/** options component*/
+export class QuickOptionsComponent implements OnInit, OnDestroy {
+  readonly name: string;
+  readonly by: string;
+  online: boolean;
+  theme: string;
+  available: AvailabilityState;
+  readonly languages: string[];
+  readonly themes = this._session.Themes;
+  readonly guides: Guide[];
+  readonly modes = ['Offline', 'Online', 'OutOfOffice', 'Vacation', 'WorkingHome'] as AvailabilityState[];
+  guidesCount: number;
+  currentLanguage: string;
+  private readonly _destroy = new Subject<void>();
+  /** options ctor */
+  constructor(private _ps: PromptService,
+    private _guide: GuideService,
+    private _options: OptionsService,
+    private _popupRef: PopupRef<QuickOptionsComponent>,
+    private _hub: HubService,
+    private _session: SessionService,
+    private _dialog: MatDialog) {
+    this.guides = this._guide.guides.filter(g => g.mode !== 'Private');
+    this.languages = this._session.languages;
+    this.currentLanguage = this._session.language;
+    this.available = this._session.state;
+    this.theme = this._session.theme.name;
+    this.name = this._session.profile.name;
+    this.by = this._session.profile.byName;
+  }
+  ngOnInit(): void {
+    this._hub.state$.pipe(startWith(this._hub.state), takeUntil(this._destroy)).subscribe(s =>
+      this.online = s === HubConnectionState.Connected
+    );
+    if (!this._session.isImpersonating) {
+      this.guidesCount = this.guides.filter(w => w.mode === 'Eager').length || null;
+    }
+  }
+  revive() {
+    this._hub.start();
+  }
+  about() {
+    this._close();
+    this._dialog.open(AboutDialog);
+  }
+  guide(guide: string) {
+    this._close();
+    this._guide.start(guide);
+  }
+  private _close() {
+    this._popupRef.close();
+  }
+
+  setAvailable(val: AvailabilityState) {
+    this._close();
+    this._session.state = val;
+  }
+  changeTheme(name: Theme) {
+    this._session.theme = name;
+    this._close();
+  }
+  changeLanguage(code: string) {
+    this._session.language = code;
+    this._ps.mask('Refreshing');
+    location.reload();
+  }
+  options() {
+    this._close();
+    this._options.open();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

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

@@ -0,0 +1,5 @@
+<div class="mat-body" *ngIf="substitute">
+  <span [innerHTML]="'OutOfOfficeOn'|translate:substitute.name|sanitizeHtml"></span>
+  <button mat-stroked-button (click)="options()" color="warn">{{'ChangeOptions'|translate}}</button>
+  <button mat-icon-button (click)="dismiss()" [bizdocTooltip]="'Dismiss'|translate"><mat-icon>close</mat-icon></button>
+</div>

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

@@ -0,0 +1,10 @@
+div {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  span {
+    flex: 1 1 auto;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Component, Inject } from "@angular/core";
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from "@angular/material/snack-bar";
+import { OptionsService } from "../../options/options.service";
+import { UserInfo } from '../../core/models';
+import { AccountService } from '../../core/account.service';
+
+@Component({
+  selector: 'bizdoc-outofoffice',
+  templateUrl: './outofoffice.component.html',
+  styleUrls: ['./outofoffice.component.scss']
+})
+/** */
+export class OutOfOfficeToast {
+  substitute: UserInfo;
+  constructor(private _service: OptionsService,
+    private _accounts: AccountService,
+    @Inject(MAT_SNACK_BAR_DATA) data: OutOfOfficeData,
+    private _ref: MatSnackBarRef<OutOfOfficeToast>) {
+    this._accounts.get(data.substituteId).subscribe(u => 
+    this.substitute = u
+    );
+  }
+  options() {
+    this._service.open('outofoffice');
+    this.dismiss();
+  }
+  dismiss() {
+    this._ref.dismiss();
+  }
+}
+export interface OutOfOfficeData {
+  substituteId: string;
+}

package/src/lib/home/progress-bar.directive.exp.ts

@@ -0,0 +1,24 @@
+import { Directive, ElementRef, Renderer2, Inject } from '@angular/core';
+import { AppHttpInterceptor } from '../core/http.interceptor';
+import { debounceTime } from 'rxjs/operators';
+import { HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
+
+/** See core/http.interceptor */
+@Directive({ selector: '[appProgressBar]' })
+export class ProgressBarDiective {
+  constructor(private _element: ElementRef, private _renderer: Renderer2, @Inject(HTTP_INTERCEPTORS) interceptors: HttpInterceptor[]) {
+    const interceptor = interceptors.find(i => i instanceof AppHttpInterceptor) as AppHttpInterceptor;
+    interceptor.active$.pipe(debounceTime(100)).subscribe(a => {
+      if (a)
+        this._simulate();
+      else
+        this._stop();
+    });
+  }
+  private _simulate(): any {
+    this._renderer.addClass(this._element.nativeElement, 'loading');
+  }
+  private _stop() {
+    this._renderer.removeClass(this._element.nativeElement, 'loading');
+  }
+}

package/src/lib/home/search.service.ts

@@ -0,0 +1,87 @@
+import { Injectable } from '@angular/core';
+import { SessionService } from '../core/session.service';
+import { TranslateService } from '../core/translate.service';
+import { MailboxService } from '../core/mailbox.service';
+import { GuideService } from '../core/guide/guide.service';
+import { Form } from '../core/models';
+import { CubeService } from '../cube/cube.service';
+@Injectable()
+export class SearchService {
+  constructor(private _guide: GuideService,
+    private _session: SessionService,
+    private _mailbox: MailboxService,
+    private _cube: CubeService,
+    private _translate: TranslateService) {
+  }
+  search(value: string): Index[] {
+    const profile = this._session.profile;
+    const xs: Index[] = [];
+    let form: Form;
+    if (value === '' || !value)
+      this._mailbox.findAll({ type: 'recent' }, { take: 5 }).subscribe(r => r.forEach(i => {
+        if (!form || form.name !== i.formId)
+          form = this._session.profile.forms.find(f => f.name === i.formId);
+        xs.push({ path: `mailbox/i/${i.id.encodeId()}`, title: `#${i.number}`, section: form.title, icon: form.icon })
+      }));
+    else if (value) {
+      const val = value.toLowerCase();
+      profile.cubes.forEach(c => c.views.forEach(v => {
+        if (v.title.toLowerCase().indexOf(val) > -1)
+          xs.push({ path: `cube/${c.name}/v/${v.name}`, title: v.title, section: c.title, icon: c.icon });
+      }));
+      profile.reports.forEach(r => {
+        if (r.title.toLowerCase().indexOf(val) > -1)
+          xs.push({ path: `reports/${r.name}`, title: r.title, section: this._translate.get('Reports'), icon: r.icon })
+      });
+      profile.utilities.forEach(u => {
+        if (u.title.toLowerCase().indexOf(val) > -1)
+          xs.push({ path: `admin/utilities/${u.name}`, title: u.title, section: this._translate.get('Utilities'), icon: u.icon })
+      });
+      profile.options.tags &&
+        profile.options.tags.forEach(t => {
+          if (t.toLowerCase().indexOf(val) > -1)
+            xs.push({ path: `mailbox/f?tag=${t}`, title: t, section: this._translate.get('Tags'), icon: 'bookmark' })
+        });
+      //profile.contacts.forEach()
+      //this._guide.guides.forEach(g => {
+      //  if (g.mode !== 'Private' && g.title.toLowerCase().indexOf(value) > -1)
+      //    xs.push({ fn: this._guide.start, args: [g.name], title: g.title, section: this._translate.get('Guides'), icon: 'help' })
+      //});
+      this._mailbox.senders(value).subscribe(r => r.forEach(s =>
+        xs.push({ path: `mailbox/f/ib?senderId=${s.id}`, title: s.name, section: this._translate.get('Senders'), icon: 'recent_actors' })
+      ));
+      const today = new Date();
+      this._mailbox.events(today, new Date(today.valueOf() + 604800000), value).
+        subscribe(r => r.forEach(e =>
+          xs.push({ path: `schedule?&date=${new Date(e.starting).valueOf().encodeId()}`, title: e.title, section: this._translate.get('Events'), icon: 'date_range' })
+        ));
+      this._mailbox.findAll({ contains: value }, { take: 5 }).subscribe(ms =>
+        ms.forEach(m => {
+          if (!form || form.name !== m.formId)
+            form = this._session.profile.forms.find(f => f.name === m.formId);
+          xs.push({ path: `mailbox/i/${m.id.encodeId()}`, title: `#${m.number}`, section: form.title, icon: form.icon });
+        })
+      );
+      this._cube.search(value, { take: 10 }).subscribe(cs =>
+        cs.forEach(r => {
+          const cube = this._session.profile.cubes.find(c => c.name === r.cube),
+            axis = cube.axes.find(a => a.name === r.axis);
+          xs.push({
+            path: `cube/${r.cube}/explore?${r.axis}=${encodeURIComponent(r.key)}`,
+            title: `${axis.title} ${r.value}`, section: cube.title, icon: cube.icon
+          });
+
+        })
+      );
+    }
+    return xs;
+  }
+}
+export interface Index {
+  path?: string;
+  title: string;
+  section: string;
+  icon?: string;
+  //  fn?: any;
+  //  args?: any[];
+}

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

@@ -0,0 +1,15 @@
+<mat-nav-list role="list">
+  <mat-list-item role="listitem" (click)="impersonate()">
+    <mat-icon matListIcon>
+        admin_panel_settings
+    </mat-icon>
+    <h4 matLine>{{'Impersonate' | translate}}</h4>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+  <mat-list-item role="listitem" (click)="signOut()">
+    <mat-icon matListIcon>
+        power_settings_new
+    </mat-icon>
+    <h4 matLine>{{'SignOut' | translate}}</h4>
+  </mat-list-item>
+</mat-nav-list>

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 { NavigationFocus, 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 NavigationFocus))
+                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();
+    }
+}