@bizdoc/core 1.14.9 → 1.14.12

package/src/lib/core/slots/slots.component.ts

@@ -1,1260 +0,0 @@
-import { ChangeDetectorRef, Component, EventEmitter, Inject, Injector, OnDestroy, OnInit, Output, ViewChild, ViewContainerRef, HostListener, ElementRef } from '@angular/core';
-import { RippleConfig } from '@angular/material/core/ripple';
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { isObservable, Subject } from 'rxjs';
-import { takeUntil, tap } from 'rxjs/operators';
-import { isArray, isBoolean, isDate, isPromise, isString } from '../functions';
-import { PANES_DATA, PaneRef, PaneOptions, PaneCommand, QueryParamNavigation, ParamNavigation, NavigationMode, NavigationStart, NavigationClose, NavigationEnd, NavigationFocus, PATH_CHAR, QUERY_CHAR, ARG_CHAR, PANE_CHAR, CollapseNavigation, BackNavigation, NavigationExpand, PaneMode, NavigationResize, } from './pane-ref';
-import { PanesRouter } from './router.service';
-import { SessionService } from '../session.service';
-import { CdkScrollable, ComponentType } from '@angular/cdk/overlay';
-import { WindowTitleService } from '../window-title.service';
-import { panesAnimation, paneAnimation, panesTitleAnimation, paramAnimation, queryAnimation, tabAnimation, tabsAnimation } from '../animations';
-import { PaneResolve, PaneRoute, ParamMap, CanDismiss, DEFAULT_POLICY, OpenPolicy } from '../configuration';
-import { GuideService } from '../guide/guide.service';
-import { debounceTime } from 'rxjs';
-declare global {
-  interface Window {
-    removeAllListeners(name?: string);
-  }
-}
-
-const DEFAULT_ROUTE = ['dashboard'];
-@Component({
-  selector: 'bizdoc-panes-outlet',
-  templateUrl: './slots.component.html',
-  styleUrls: ['./slots.component.scss'],
-  animations: [panesAnimation,
-    panesTitleAnimation,
-    paneAnimation,
-    paramAnimation,
-    queryAnimation,
-    tabsAnimation,
-    tabAnimation
-  ]
-})
-export class SlotsComponent implements OnInit, OnDestroy {
-  @Output() readonly dialogChange = new EventEmitter<boolean>();
-  @ViewChild('panning', { read: ViewContainerRef, static: true }) _panesContainerRef: ViewContainerRef;
-  @ViewChild('tabing') _tabsElement: ElementRef;
-  @ViewChild(CdkScrollable, { static: true }) _scrollable: CdkScrollable;
-  titleAnimation = 0;
-  group: string;
-  swap?: number;
-  swapTab?: number;
-  prevGroup?: string;
-
-  readonly panes: PaneRef<any>[] = [];
-  readonly tabs: PaneRef<any>[] = [];
-  private _selectedTabIndex = -1;
-  dialog = false;
-  public get selectedTabIndex() {
-    return this._selectedTabIndex;
-  }
-  public set selectedTabIndex(value) {
-    this._selectedTabIndex = value;
-    if (this._selectedTabIndex > -1 && this.tabs.at(this._selectedTabIndex).dialog) {
-      this.dialog = true;
-      this.dialogChange.emit(true);
-    }
-    else {
-      this.dialog = false;
-    }
-    this._setTabAnimation();
-  }
-  private _setTabAnimation() {
-    this.tabsAnimation = {
-      value: this.selectedTabIndex,
-      params: {
-        startWidth: this._tabsElement ? this._tabsElement.nativeElement.clientWidth : 0
-      }
-    };
-  }
-  selectedIndex = -1;
-  next: boolean;
-  prev: boolean;
-  dragging: boolean = false;
-  tabsAnimation: {
-    value: number,
-    params: {
-      startWidth: number
-    }
-  };
-  readonly ripple: RippleConfig = {
-    color: this._session.getAccent(),
-    centered: true,
-    radius: 25
-  }
-  accent: string = this._session.getAccent();
-  private _navigationInProcess: boolean;
-  private _repository: ExtendedRoute[];
-  private readonly _pending = [] as string[];
-  private readonly _rtl = this._session.inverse;
-  private readonly _resizing = new Subject<void>();
-  private readonly _destroy = new Subject<void>();
-  constructor(
-    @Inject(PANES_DATA) data: ExtendedRoute[],
-    private _session: SessionService,
-    private _cd: ChangeDetectorRef,
-    private _router: PanesRouter,
-    private _title: WindowTitleService,
-    private _guide: GuideService,
-    private _injector: Injector) {
-    _session.themeChange.pipe(takeUntil(this._destroy)).
-      subscribe(() => this.accent = _session.getAccent());
-    _router._comm$.
-      subscribe(e => {
-        switch (e) {
-          case 'collapse':
-            this.collapse();
-            break;
-          default:
-        }
-      });
-    this._repository = prepareRoutes(data);
-  }
-
-  ngOnInit(): void {
-    this._router._navigate$.
-      subscribe(async n => {
-        const { commands, component, pathMode, relativeTo } = n;
-        let {
-          icon,
-          title,
-          group,
-          help,
-          policy,
-          queryParams,
-          state
-        } = n;
-        let
-          queryString: string,
-          params: ParamMap,
-          parent: PaneRef,
-          path: string,
-          route: ExtendedRoute;
-
-        if (commands && commands.length) {
-          path = n.commands.join('/');
-          if (path.indexOf(QUERY_CHAR) > -1) {
-            const segs = path.split(QUERY_CHAR);
-            queryString = segs[1];
-            queryParams = this._parseQueryParams(queryString || '');
-            path = segs[0];
-          }
-          else {
-            queryParams = n.queryParams || {};
-            queryString = this._queryString(queryParams);
-          }
-          if (pathMode === 'relative' || path.startsWith('../')) {
-            parent = relativeTo || this.panes[this.selectedIndex];
-            let parentpath = parent.path;
-            while (path.startsWith('../')) {
-              parentpath = parentpath.substr(0, parentpath.lastIndexOf('/'));
-              path = path.substr(3);
-            }
-            path = parentpath + '/' + path;
-          }
-          route = this._match(path);
-
-          if (!route)
-            throw `no match ${path}`;
-          params = this._params(route, path);
-          if (!policy) policy = route.policy || DEFAULT_POLICY;
-          else if (route.policy) policy |= route.policy;
-          if (!icon) icon = route.icon;
-          if (!help) help = route.help;
-        }
-        else {
-          if (!policy) policy = DEFAULT_POLICY;
-          if (!queryParams) queryParams = {};
-        }
-
-        if ((policy & OpenPolicy.Clear) == OpenPolicy.Clear) {
-          this._clearPending();
-          await this._clearTabs();
-          if (!(policy & OpenPolicy.Tab))
-            await this._clearPanes();
-        }
-        if (commands) {
-          let i = 0;
-          if ((policy & OpenPolicy.Tab) == OpenPolicy.Tab)
-            while (i < this.tabs.length) {
-              let tab = this.tabs[i];
-              if (path === tab.path) {
-                if (queryString === tab.queryString) {
-                  if ((policy & OpenPolicy.Toggle) == OpenPolicy.Toggle) {
-                    this.tabs.splice(i, 1);
-                    this.selectedTabIndex = this.tabs.length - 1;
-                  }
-                  else {
-                    state && tab._data$.next(state);
-                    this.group = tab.group;
-                    this.selectedTabIndex = i;
-                    this._cd.detectChanges();
-                  }
-                  return;
-                }
-                else {
-                  this._navQueryParams(tab, queryParams, state);
-                  this.group = tab.group;
-                  this.selectedTabIndex = i;
-                  this._cd.detectChanges();
-                  this._syncBrowserHistory();
-                  return;
-                }
-              }
-              else if (tab.route === route) {
-                await this._navParams(path, tab, params, queryParams, state);
-                this.group = tab.group;
-                this.selectedTabIndex = i;
-                this._syncBrowserHistory();
-                return;
-              }
-              i++;
-            }
-          else
-            while (i < this.panes.length) {
-              let pane = this.panes[i];
-              if (path === pane.path) {
-                if (queryString === pane.queryString) {
-                  if ((policy & OpenPolicy.Toggle) == OpenPolicy.Toggle)
-                    await this.removeAt(i);
-                  else {
-                    state && pane._data$.next(state);
-                    this._cd.detectChanges();
-                    this.scrollTo(i);
-                  }
-                  return;
-                }
-                else {
-                  this._navQueryParams(pane, queryParams, state);
-                  this.scrollTo(i);
-                  this._syncBrowserHistory();
-                  return;
-                }
-              }
-              else if (pane.route === route) {
-                await this._navParams(path, pane, params, queryParams, state);
-                this._syncBrowserHistory();
-                return;
-              }
-              i++;
-            }
-          if (commands.length) {
-            if (!state) state = {};
-            await this._state(route, path, params, state);
-            if ((policy & OpenPolicy.Tab) == OpenPolicy.Tab)
-              this._insertTab(component || route.component,
-                {
-                  queryString,
-                  path,
-                  route,
-                  icon,
-                  title,
-                  group,
-                  help,
-                  data: state,
-                  parent,
-                  params,
-                  queryParams,
-                  policy
-                });
-            else
-              this._insertPane(component || route.component,
-                {
-                  queryString,
-                  path,
-                  route,
-                  icon,
-                  title,
-                  help,
-                  data: state,
-                  parent,
-                  params,
-                  queryParams,
-                  policy
-                });
-            route &&
-              this._syncBrowserHistory();
-          }
-          else {
-            const pane = (policy & OpenPolicy.Tab) == OpenPolicy.Tab ?
-              this.tabs[this.selectedTabIndex] : this.panes[this.selectedIndex];
-            this._navQueryParams(pane, queryParams, state);
-            this._syncBrowserHistory();
-            if ((policy & OpenPolicy.Tab) != OpenPolicy.Tab) this.select(this.selectedIndex);
-          }
-        }
-        else {
-          if ((policy & OpenPolicy.Tab) == OpenPolicy.Tab)
-            this._insertTab(component,
-              {
-                data: state,
-                icon, title, help,
-                parent,
-                queryString,
-                path,
-                route,
-                group,
-                params,
-                queryParams,
-                policy
-              });
-          else this._insertPane(component,
-            {
-              data: state,
-              icon, title, help,
-              parent,
-              queryString,
-              path,
-              route,
-              params,
-              policy, queryParams
-            });
-        }
-      });
-    window.removeAllListeners('popstate');
-    window.addEventListener('popstate', e => {
-      if (this._navigationInProcess) {
-        this._navigationInProcess = false;
-        return;
-      }
-      if (e.state && e.state.bizdoc) {
-        const evt = new BackNavigation();
-        if (evt._preventDefault) return;
-        this._router._events$.next(evt);
-        const state = e.state as HistoryState;
-        this._deserialize(location.pathname.substring(1), state);
-        this.swap = state.swap;
-        this.swapTab = state.swapTab;
-        this.prevGroup = state.prevGroup;
-        this.group = state.group;
-        this.selectedTabIndex = state.selectedTabIndex;
-      }
-      else
-        this._deserialize(location.pathname.substring(1));
-    });
-    if (location.pathname.length > 1)
-      this._deserialize(location.pathname.substring(1),
-        history.state && history.state.bizdoc ? history.state : undefined);
-    else
-      this._router._navigate$.next({
-        commands: DEFAULT_ROUTE,
-      });
-    this._resizing.pipe(debounceTime(150)).subscribe(this._resize.bind(this));
-  }
-  private async _deserialize(url: string, state?: HistoryState) {
-
-    const sections = decodeURIComponent(url).split(PANE_CHAR),
-      panes = deserialize(sections[0]),
-      tabs = sections.length > 1 ? deserialize(sections[1]) : [];
-
-    function deserialize(path: string) {
-      return path.
-        split(PATH_CHAR).map(s => {
-          const [path, queryString] = s.split(QUERY_CHAR);
-          return { path, queryString };
-        });
-    }
-
-    for (let i = 0; i < panes.length; i++) {
-      let pane = panes[i];
-      await this._navigatePane(i, pane.path, pane.queryString, state ? state.panes[i] : null);
-    }
-    if (this.panes.length > panes.length) {
-      let i = 0;
-      while (i < this.panes.length) {
-        let pane = this.panes[i];
-        if (panes.length - 1 < i || pane.path !== panes[i].path) {
-          if (this.selectedIndex === i)
-            this.selectedIndex = i - 1;
-          this.panes.splice(i, 1);
-          this._destroyPane(pane);
-        }
-        else
-          i++;
-      }
-    }
-    if (this.selectedIndex < 0)
-      this.select(0);
-    for (let i = 0; i < tabs.length; i++) {
-      let tab = tabs[i];
-      await this._navigateTab(i, tab.path, tab.queryString, state ? state.tabs[i] : null);
-    }
-    if (this.tabs.length > tabs.length) {
-      let i = 0;
-      while (i < this.tabs.length) {
-        let tab = this.tabs[i];
-        if (tabs.length - 1 < i || tab.path !== tabs[i].path) {
-          if (this.selectedTabIndex === i) {
-            this.selectedTabIndex = i - 1;
-          }
-          this.tabs.splice(i, 1);
-          this._destroyPane(tab);
-        }
-        else
-          i++;
-      }
-    }
-    if (this.tabs.length && this.selectedTabIndex < 0) {
-      this.selectedTabIndex = 0;
-    }
-    const n = this.panes.length;
-    for (let i = 0; i < n; i++) {
-      let pane = this.panes[i];
-      if (pane.expanded !== (n === 1)) {
-        const evt = new NavigationExpand(pane._expanded = n === 1, pane);
-        pane._events$.next(evt);
-      }
-    }
-  }
-  /**
-   * 
-   * @param index
-   * @param path
-   * @param queryString
-   * @param state
-   */
-  private async _navigatePane(index: number, path: string, queryString: string, state?: any) {
-    const route = this._match(path);
-
-    if (!route) throw `no match ${path}`;
-
-    if (!state) state = {};
-
-    while (index < this.panes.length) {
-      let pane = this.panes[index];
-      if (path === pane.path) {
-        if (queryString === pane.queryString) {
-          return;
-        }
-        else {
-          const queryParams = this._parseQueryParams(queryString);
-          this._navQueryParams(pane, queryParams, state);
-          return;
-        }
-      }
-      else if (pane.route === route) {
-        const queryParams = this._parseQueryParams(queryString);
-        const params = this._params(pane.route as ExtendedRoute, path);
-        await this._navParams(path, pane, params, queryParams, state);
-        return;
-      }
-      index++;
-    }
-
-    const params = this._params(route, path);
-    const queryParams = this._parseQueryParams(queryString);
-    const parent = this._findAncestor(route, path);
-    await this._state(route, path, params, state);
-    this._insertPane(route.component, {
-      path, parent, route, data: state, params, queryParams,
-      icon: route.icon,
-      help: route.help,
-      policy: route.policy,
-      focus: false
-    });
-  }
-  private async _navigateTab(index: number, path: string, queryString: string, state?: any) {
-    const route = this._match(path);
-
-    if (!route) throw `no match ${path}`;
-
-    if (!state) state = {};
-
-    while (index < this.tabs.length) {
-      let tab = this.tabs[index];
-      if (path === tab.path) {
-        if (queryString === tab.queryString) {
-          return;
-        }
-        else {
-          const queryParams = this._parseQueryParams(queryString);
-          this._navQueryParams(tab, queryParams, state);
-          return;
-        }
-      }
-      else if (tab.route === route) {
-        const queryParams = this._parseQueryParams(queryString);
-        const params = this._params(tab.route as ExtendedRoute, path);
-        await this._navParams(path, tab, params, queryParams, state);
-        return;
-      }
-      index++;
-    }
-
-    const params = this._params(route, path);
-    const queryParams = this._parseQueryParams(queryString);
-
-    const parent = this._findAncestor(route, path);
-
-    await this._state(route, path, params, state);
-    this._insertTab(route.component, {
-      icon: route.icon,
-      help: route.help,
-      policy: route.policy | OpenPolicy.Tab,
-      path, parent, route,
-      data: state,
-      params, queryParams,
-      focus: false,
-      swap: false
-    });
-  }
-  private _findAncestor(route: ExtendedRoute, path: string) {
-    if ((route as ExtendedRoute).parent)
-      return this.panes.find(p => (p.route as ExtendedRoute) ===
-        (route as ExtendedRoute).parent &&
-        path.startsWith(p.path));
-  }
-  /**
-   * 
-   * @param pane
-   * @param queryParams
-   */
-  private _navQueryParams(pane: PaneRef<any>, queryParams: ParamMap, state: ParamMap) {
-    pane._queryString = this._queryString(queryParams);
-    state && pane._data$.next(state);
-    pane._queryParams$.next(queryParams);
-    const evt = new QueryParamNavigation(queryParams, pane);
-    pane._events$.next(evt);
-    this._router._events$.next(evt);
-  }
-  /**
-   * 
-   * @param path
-   * @param pane
-   * @param params
-   * @param queryParams
-   * @param state
-   */
-  private async _navParams(path: string, pane: PaneRef<any>, params: ParamMap, queryParams: ParamMap, state: ParamMap) {
-    if (pane.route.canDismiss)
-      await this._dismiss(pane);
-
-    if (!state) state = {};
-    await this._state(pane.route as ExtendedRoute, path, params, state);
-    pane._data$.next(state);
-    pane._path = path;
-    pane._params$.next(params);
-    if (queryParams) {
-      pane._queryString = this._queryString(queryParams);
-      pane._queryParams$.next(queryParams);
-    }
-    else {
-      pane._queryString = '';
-      pane._queryParams$.next({});
-    }
-    const evt = new ParamNavigation(params, pane);
-    pane._events$.next(evt);
-    this._router._events$.next(evt);
-
-    this.panes.concat(this.tabs).forEach(child => {
-      if (child.route && (child.route as ExtendedRoute).parent === pane.route) {
-        child._data$.next(Object.assign(child.data, state));
-        child._params$.next(params);
-        child._path = pane.path + '/' + child.route.path;
-        if (this.selectedTabIndex > -1 && child === this.tabs[this.selectedTabIndex]) {
-          this.selectedTabIndex = this.selectedTabIndex;
-          this.group = child.group;
-        }
-      }
-    });
-    if (pane.mode === 'pane') this.titleAnimation++;
-    this._cd.detectChanges();
-  }
-  /** */
-  private _syncBrowserHistory() {
-    let path = this.panes.filter(p => p.route).map(s => s.fullPath).join(PATH_CHAR);
-    if (this.tabs.length) {
-      const tabs = this.tabs.filter(p => p.route);
-      if (tabs.length)
-        path += PANE_CHAR + tabs.map(s => s.fullPath).join(PATH_CHAR);
-    }
-    const state = this._constructHistoryState();
-    this._navigationInProcess = true;
-    history.pushState(state, '', '/' + path);
-    setTimeout(() => this._navigationInProcess = false, 200);
-  }
-
-  private _constructHistoryState() {
-    return {
-      bizdoc: true,
-      step: history.state && history.state.bizdoc ? (history.state as HistoryState).step + 1 : 1,
-      selectedTabIndex: this.selectedTabIndex,
-      panes: this.panes.map(p => p.data),
-      tabs: this.tabs.map(t => t.data),
-      swap: this.swap,
-      group: this.group,
-      swapTab: this.swapTab,
-      prevGroup: this.prevGroup
-    } as HistoryState;
-  }
-
-  drop(evt: CdkDragDrop<string, string>) {
-    const pane = this.panes[evt.previousIndex];
-    this.panes.splice(evt.previousIndex, 1);
-    this.panes.splice(evt.currentIndex, 0, pane);
-    this._syncBrowserHistory();
-  }
-
-  togglePinned(pane: PaneRef<any>) {
-    pane.pinned = !pane.pinned;
-    this.panes.forEach(s => {
-      if (s.decendentOf(pane)) s.pinned = pane.pinned;
-    });
-  }
-
-  private _queryString(queryParams: ParamMap) {
-    const names = Object.keys(queryParams);
-    let queryString: string;
-    for (var i = 0; i < names.length; i++) {
-      let val = queryParams[names[i]];
-
-      if (val !== null && val !== undefined) {
-        if (!queryString) queryString = '';
-        else queryString = queryString + ARG_CHAR;
-
-        if (isString(val))
-          queryString += `${names[i]}=${encodeURIComponent(val)}`;
-        else if (isArray(val))
-          queryString += val.map(v => `${names[i]}=${v}`).join(ARG_CHAR);
-        else if (isDate(val))
-          queryString += `${names[i]}=${val.toJSON()}`;
-        else
-          queryString += `${names[i]}=${val}`;
-      }
-    }
-    return queryString;
-  }
-  private _parseQueryParams(queryString: string): ParamMap {
-    const queryParams = {};
-    queryString && queryString.
-      split(ARG_CHAR).forEach(p => {
-        const [name, value] = p.split('=');
-        if (!queryParams[name])
-          queryParams[name] = value;
-        else {
-          const vals = queryParams[name];
-          queryParams[name] = isArray(vals) ? [...vals, value] : [vals, value];
-        }
-      });
-    return queryParams;
-  }
-  /**
-   * 
-   * @param route
-   * @param path
-   */
-  private _params(route: ExtendedRoute, path: string) {
-    const ex = route.regEx.exec(path),
-      params = ex.groups;
-
-    return params || {};
-  }
-  /**
-   * 
-   * @param url
-   */
-  private _match(url: string) {
-    let route = this._repository.find(r => r.regEx.test(url));
-    if (route)
-      while (route.children) {
-        let child = route.children.find(r => r.regEx.test(url));
-        if (child)
-          route = child;
-        else break;
-      }
-    return route;
-  }
-  /**
-   * 
-   * @param route
-   * @param path
-   * @param params
-   * @param data
-   */
-  private async _state(route: ExtendedRoute, path: string, params: ParamMap, data: ParamMap) {
-    if (this._pending.indexOf(path) > -1) {
-      //this._ps.toast('Working');
-      throw 'already processing';
-    }
-    this._pending.push(path);
-
-    const { parent, resolve } = route;
-    if (parent)
-      await this._parentstate(parent, path, params, data);
-    if (resolve) {
-      await this._resolve(resolve, params, data);
-    }
-    this._pending.remove(path);
-  }
-  /**
-   * 
-   * @param route
-   * @param path
-   * @param params
-   * @param data
-   */
-  private async _parentstate(route: ExtendedRoute, path: string, params: ParamMap, data: ParamMap) {
-    const { parent, resolve } = route;
-
-    if (parent)
-      await this._parentstate(parent, path, params, data);
-
-    const pane = this.panes.find(s => s.route && s.route === route
-      && path.startsWith(s.path));
-
-    pane && Object.assign(data, pane.data);
-
-    if (resolve)
-      await this._resolve(resolve, params, data);
-  }
-
-  private async _resolve(resolve: { [key: string]: ComponentType<PaneResolve<any>> }, params: ParamMap, data: ParamMap) {
-    const keys = Object.keys(resolve);
-    for (let i = 0; i < keys.length; i++) {
-      let key = keys[i];
-      if (!data[key]) {
-        const instance = this._injector.get(resolve[key]) as PaneResolve<any>;
-        const value = instance.onResolve(params);
-        if (isPromise(value))
-          await value.then(r => data[key] = r);
-        else if (isObservable(value))
-          await value.pipe(tap(r => data[key] = r)).toPromise();
-        else
-          data[key] = value;
-      }
-    }
-  }
-
-  add<T>(component: ComponentType<T>, options?: PaneOptions) {
-    return this.insert(this.panes.length, component, options);
-  }
-  insert<T>(position: number, component: ComponentType<T>, options?: PaneOptions) {
-    const pane = this._insertPane<T>(component, options || {}, position);
-    return pane;
-  }
-  private _insertPane<T = any>(component: ComponentType<T>, options: {
-    path?: string;
-    route?: PaneRoute;
-    icon?: string;
-    title?: string;
-    inputs?: { [name: string]: any },
-    data?: ParamMap;
-    params?: ParamMap;
-    queryParams?: ParamMap;
-    help?: string;
-    parent?: PaneRef<any>;
-    queryString?: string;
-    policy?: OpenPolicy;
-    focus?: boolean
-  }, position?: number) {
-
-    const stretchable = (options.policy & OpenPolicy.Stretch) == OpenPolicy.Stretch;
-
-    const pane = this._constract<T>(component, {
-      mode: 'pane',
-      expanded: !this.panes.length,
-      stretchable,
-      ...options
-    });
-    if (position === undefined)
-      position = this.panes.length;
-    this.panes.push(pane);
-    this.titleAnimation++;
-    this._cd.detectChanges();
-    const evt = new NavigationStart(pane);
-    this._router._events$.next(evt);
-    if (options.focus !== false) {
-      this.selectedIndex = position;
-      this._title.set(pane.title);
-      if (this.panes.length > 1) this.scrollTo(position);
-    }
-    this.enableNavigationArrows();
-    return pane;
-  }
-  /**
-   * 
-   * @param component
-   * @param options
-   */
-  private _constract<T = any>(component: ComponentType<T>,
-    options: {
-      mode: PaneMode,
-      expanded?: boolean;
-      dialog?: boolean;
-      stretchable?: boolean;
-      path?: string;
-      route?: PaneRoute;
-      icon?: string;
-      title?: string;
-      group?: string;
-      data?: ParamMap;
-      params?: ParamMap;
-      queryParams?: ParamMap;
-      help?: string;
-      parent?: PaneRef<any>;
-      queryString?: string;
-      dismissable?: boolean;
-      expandable?: boolean
-    }) {
-    const pane = new PaneRef<T>(component, this._injector, options);
-    pane._comm$.subscribe(e => this._paneCommand<T>(e, pane));
-    return pane;
-  }
-  /**
-   * 
-   * @param component
-   * @param options
-   */
-  private _insertTab<T = any>(component: ComponentType<T>, options: {
-    icon?: string;
-    title?: string;
-    group?: string;
-    help?: string;
-    path?: string;
-    queryString?: string;
-    route?: PaneRoute;
-    data?: ParamMap;
-    params?: ParamMap;
-    queryParams?: ParamMap;
-    parent?: PaneRef<any>;
-    policy?: OpenPolicy;
-    swap?: boolean;
-    focus?: boolean;
-  }) {
-    const { policy } = options,
-      dialog = (policy & OpenPolicy.Dialog) == OpenPolicy.Dialog,
-      expandable = (policy & OpenPolicy.Expandable) == OpenPolicy.Expandable,
-      dismissable = (policy & OpenPolicy.Dismissable) == OpenPolicy.Dismissable;
-
-    const tab = this._constract<T>(component,
-      {
-        mode: 'tab',
-        expanded: false,
-        ...options,
-        dialog,
-        dismissable,
-        expandable
-      });
-    this.tabs.push(tab);
-    this._cd.detectChanges();
-    this._router._events$.next(new NavigationStart(tab));
-    if (tab.group && this.group !== tab.group && options.swap !== false) {
-      let i = 0, swap = false;
-      do {
-        if (this.tabs[i].group !== tab.group) {
-          this._destroyPane(this.tabs[i]);
-          this.tabs.splice(i, 1);
-          swap = true;
-        }
-        else
-          i++
-      } while (i < this.tabs.length);
-      if (swap) {
-        this.swapTab = this._getHistoryStep();
-        this.prevGroup = this.group;
-      }
-      this.group = tab.group;
-    }
-    else
-      this.swapTab = null;
-    if (options.focus !== false) {
-      this.selectedTabIndex = this.tabs.length - 1;
-    }
-    this._cd.detectChanges();
-    return tab;
-  }
-
-  guide(name: string) {
-    this._guide.start(name);
-  }
-  back() {
-    this._navBack(this.swap);
-    this.swap = null;
-  }
-  /**
-   * 
-   * @param steps
-   */
-  private async _navBack(steps: number) {
-    history.go(steps - (history.state as HistoryState).step);
-  }
-  tabBack() {
-    this._navBack(this.swapTab);
-    this.swapTab = null;
-  }
-  /**
-   * 
-   * @param command
-   * @param pane
-   */
-  private async _paneCommand<T = any>(command: PaneCommand, pane: PaneRef<T>) {
-    switch (command) {
-      case 'focus':
-        {
-          if (pane.mode === 'tab') {
-            this.selectedTabIndex = this.tabs.indexOf(pane);
-          }
-          else {
-            const index = this.panes.indexOf(pane);
-            this.focus(index);
-          }
-          break;
-        }
-      case 'close':
-        if (pane.mode === 'tab') {
-          const index = this.tabs.indexOf(pane);
-          this.closeTab(index);
-        }
-        else {
-          const index = this.panes.indexOf(pane);
-          await this.removeAt(index);
-          this._clearPending();
-          await this._clearTabs();
-          if (this.panes.length)
-            this._syncBrowserHistory();
-          else
-            this._router.navigate(DEFAULT_ROUTE);
-        }
-        break;
-      case 'expand':
-        if (pane.mode === 'tab')
-          this.expandTab();
-        else
-          this.expandPane();
-        break;
-      case 'recycle': {
-        const state = this._constructHistoryState();
-        history.replaceState(state, '');
-        break;
-      }
-    }
-  }
-  /**
-   * escape
-   * @param event
-   */
-  @HostListener('document:keydown.escape')
-  async collapse() {
-    if (!this.tabs.length) return;
-    const evt = new CollapseNavigation();
-    this._router._events$.next(evt);
-    if (evt._preventDefault) return;
-    this._clearPending();
-    await this._clearTabs();
-    this._syncBrowserHistory();
-  }
-  @HostListener('window:resize')
-  onResize() {
-    this._resizing.next();
-  }
-  /** */
-  private _resize() {
-    if (this.panes.length > 1 && !this.panes[this.panes.length - 1].stretchable) {
-      const el = this._panesContainerRef.element.nativeElement as HTMLDivElement,
-        child = el.lastElementChild as HTMLDivElement;
-      child.style.minWidth =
-        (el.parentElement.parentElement.clientWidth - el.parentElement.offsetLeft - child.offsetLeft - 2) + 'px';
-    }
-    this.tabs.concat(this.panes).forEach(p => p._events$.next(new NavigationResize({
-    } as any, p)));
-  }
-  closeTab(position: number) {
-    const tab = this.tabs[position];
-    if (!this._closing(tab)) return;
-    this.tabs.splice(position, 1);
-    this._destroyPane(tab);
-    this.selectedTabIndex = this.tabs.length ? position > 0 ? position - 1 : 0 : -1;
-    this._syncBrowserHistory();
-  }
-  /**
-   * 
-   * @param pane
-   */
-  private _closing(pane: PaneRef<any>) {
-    let evt = new NavigationClose(pane);
-    pane._events$.next(evt);
-    return !evt._preventDefault;
-  }
-
-  expandPane() {
-    const pane = this.panes[this.selectedIndex];
-    const evt = new NavigationExpand(pane._expanded = true, pane);
-    pane._events$.next(evt);
-    this._router._events$.next(evt);
-    if (evt._preventDefault) return;
-    this.swap = this._getHistoryStep();
-    let i = 0;
-    do {
-      if (this.panes[i] !== pane) {
-        this._destroyPane(this.panes[i]);
-        this.panes.splice(i, 1);
-      }
-      else
-        i++;
-    }
-    while (i < this.panes.length);
-    this.selectedIndex = 0;
-    this._syncBrowserHistory();
-  }
-  private _getHistoryStep(): number {
-    return history.state && history.state.bizdoc ? (history.state as HistoryState).step : 0;
-  }
-
-  expandTab() {
-    const tab = this.tabs[this.selectedTabIndex];
-    const evt = new NavigationExpand(tab._expanded = true, tab)
-    tab._events$.next(evt);
-    this._router._events$.next(evt);
-    if (evt._preventDefault) return;
-    this.swap = this._getHistoryStep();
-    this.swapTab = null;
-    this.panes.forEach(p =>
-      this._destroyPane(p)
-    );
-    this.tabs.splice(this.selectedTabIndex, 1);
-    this.panes.splice(0, this.panes.length, tab);
-
-    tab._mode = 'pane';
-    this.selectedTabIndex = this.tabs.length ? 0 : -1;
-    this._syncBrowserHistory();
-  }
-
-  select(position: number) {
-    if (this.selectedIndex === position) return;
-    if (position === -1) {
-      if (this.panes.length) position = this.panes.length - 1;
-      else return;
-    }
-    this.selectedIndex = position;
-    const pane = this.panes[position];
-    const evt = new NavigationFocus(pane);
-    pane._events$.next(evt);
-    this._router._events$.next(evt);
-    this._title.set(pane.title);
-  }
-  async removeAt(position: number) {
-    const pane = this.panes[position];
-
-    if (!this._closing(pane)) return;
-
-    await this._dismiss(pane);
-
-    this._discardPane(pane);
-
-    if (position >= this.selectedIndex)
-      this.select(-1);
-    this._syncBrowserHistory();
-  }
-  /**
-   * 
-   * @param pane
-   */
-  private async _dismiss(pane: PaneRef<any>) {
-    const panes = this.panes.concat(this.tabs).
-      filter(s => s.decendentOf(pane) && s.route && s.route.canDismiss).
-      reverse();
-
-    pane.route && pane.route.canDismiss &&
-      panes.push(pane);
-
-    for (let i = 0; i < panes.length; i++) {
-      let ok = await this._dismissable(panes[i]);
-      if (!ok) throw '';
-    }
-  }
-  /**
-   * 
-   * @param pane
-   */
-  private _discardPane(pane: PaneRef<any>) {
-    this.panes.concat(this.tabs).
-      filter(s => s.decendentOf(pane)).
-      reverse().
-      forEach(s => this._discardPane(s));
-    this._destroyPane(pane);
-    const index = this.panes.indexOf(pane);
-    this.panes.splice(index, 1);
-  }
-  private _clearPending() {
-    this._pending.splice(0, this._pending.length);
-  }
-  /** */
-  private async _clearPanes() {
-    await this._dismissAll(this.panes);
-    this.panes.forEach(p => this._destroyPane(p));
-    this.panes.splice(0, this.panes.length);
-    this.selectedIndex = -1;
-    this.swap = null;
-  }
-  private async _clearTabs() {
-    if (!this.tabs.length) return;
-    await this._dismissAll(this.tabs);
-    this.tabs.forEach(t => this._destroyPane(t));
-    this.tabs.splice(0, this.tabs.length);
-    this.selectedTabIndex = -1;
-    this.swapTab = null;
-  }
-  /**
-   * 
-   * @param panes
-   */
-  private async _dismissAll(panes: PaneRef[]) {
-    for (let pane of panes.
-      filter(s => s.route && s.route.canDismiss)) {
-      let ok = await this._dismissable(pane);
-      if (!ok)
-        throw '';
-    }
-  }
-
-  /**
-   * 
-   * @param pane
-   */
-  private _dismissable(pane: PaneRef<any>) {
-    const { instance, route: { canDismiss } } = pane;
-    const dismissable = this._injector.get(canDismiss) as CanDismiss<any>;
-    const ok = dismissable.onDismiss(instance);
-    if (isBoolean(ok))
-      return Promise.resolve(ok);
-    else if (isPromise(ok))
-      return ok;
-    else
-      return ok.toPromise();
-  }
-  scrollTo(index: number) {
-    const item = this._children.item(index) as HTMLDivElement;
-    item && item.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
-  }
-
-  private get _children() {
-    return this._panesContainerRef.element.nativeElement.querySelectorAll('.pane-content');
-  }
-  done() {
-    this.enableNavigationArrows();
-    this._resize();
-  }
-  enableNavigationArrows(_?: Event) {
-    const container = this._panesContainerRef.element.nativeElement,
-      scrollLeft = Math.round(container.scrollLeft);
-    this.next = this._rtl ? container.clientWidth - scrollLeft < container.scrollWidth :
-      scrollLeft + container.clientWidth < container.scrollWidth;
-    this.prev = this._rtl ? scrollLeft < 0 : scrollLeft > 0;
-  }
-  scrollBy(n: number) {
-    const left = n * (this._rtl ? -1 : 1);
-    this._panesContainerRef.element.nativeElement.scrollBy({ behavior: 'smooth', left });
-  }
-  focus(index) {
-    const el = this._children.item(index) as HTMLDivElement;
-    el.focus();
-  }
-  onPaneResize(pane: PaneRef<any>, event: MouseEvent) {
-    const el = (event.srcElement as HTMLDivElement).previousElementSibling as HTMLDivElement;
-
-    const // remember mouse down info
-      width = el.clientWidth,
-      d = this._rtl ? -1 : 1;
-
-    (event.srcElement as HTMLDivElement).classList.add('resizing');
-
-    this.dragging = true;
-
-    document.onmousemove = onMouseMove;
-    document.onmouseup = () => {
-      (event.srcElement as HTMLDivElement).classList.remove('resizing');
-      document.onmousemove = document.onmouseup = null;
-      this.dragging = false;
-    };
-    function onMouseMove(e) {
-
-      const delta = (e.clientX - event.clientX) * d;
-      el.style.width = el.style.minWidth
-        = Math.max(width + delta, 350) + 'px';
-      pane._events$.next(new NavigationResize({} as any, pane));
-    }
-  }
-  onTabResize(event: MouseEvent) {
-    const el = (event.srcElement as HTMLDivElement).nextElementSibling as HTMLDivElement;
-
-    const
-      me = this,
-      // remember mouse down info
-      width = el.clientWidth,
-      d = this._rtl ? 1 : -1;
-
-    (event.srcElement as HTMLDivElement).classList.add('resizing');
-
-    this.dragging = true;
-
-    document.onmousemove = onMouseMove;
-    document.onmouseup = () => {
-      (event.srcElement as HTMLDivElement).classList.remove('resizing');
-      document.onmousemove = document.onmouseup = null;
-      this.dragging = false;
-      me.enableNavigationArrows();
-      this._resize();
-    };
-    function onMouseMove(e) {
-
-      // prevent negative-sized elements
-      const delta = Math.max((e.clientX - event.clientX) * d, -width);
-      el.style.width = el.style.minWidth = (width + delta) + 'px';
-      localStorage.setItem('tabs', el.style.width);
-    }
-  }
-  private _destroyPane(pane: PaneRef) {
-    pane._destroy();
-    const evt = new NavigationEnd(pane);
-    pane._events$.next(evt);
-    this._router._events$.next(evt);
-  }
-  ngOnDestroy(): void {
-    this._destroy.next();
-    this._destroy.complete();
-  }
-}
-
-const PANE_PARAMS_REGEX = /(:[\w\-]+)/g;
-
-function prepareRoutes(routes: PaneRoute[], treePath?: string): ExtendedRoute[] {
-  for (let i = 0; i < routes.length; i++) {
-    let route = routes[i], fullPath = (treePath ? (treePath + '/') : '') + route.path;
-
-    Object.assign(route, {
-      fullPath,
-      regEx: new RegExp('^' + fullPath.
-        replace('/', '\\/').
-        replace(PANE_PARAMS_REGEX, e => `(?<${e.substr(1)}>[\\w@\\-]*)`))
-    });
-    if (route.children) {
-      let children = prepareRoutes(route.children, fullPath);
-      for (var j = 0; j < children.length; j++)
-        Object.assign(children[j], {
-          parent: route
-        });
-    }
-  }
-  return routes as ExtendedRoute[];
-}
-
-interface ExtendedRoute extends PaneRoute {
-  fullPath: string;
-  regEx: RegExp;
-  parent?: ExtendedRoute;
-  children?: ExtendedRoute[];
-}
-interface HistoryState {
-  bizdoc: true;
-  step: number;
-  swap?: number;
-  swapTab?: number;
-  group?: string;
-  prevGroup?: string;
-  panes: any[];
-  tabs: any[];
-  selectedTabIndex?: number;
-}