@bizdoc/core 1.14.5 → 1.14.9

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

@@ -0,0 +1,1260 @@
+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;
+}