@bizdoc/core 1.14.9 → 1.14.10

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

@@ -1,105 +0,0 @@
-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

@@ -1,18 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-: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

@@ -1,55 +0,0 @@
-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

@@ -1,11 +0,0 @@
-@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

@@ -1,41 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-.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

@@ -1,95 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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();
-    }
-}