@bizdoc/core 1.14.9 → 1.14.10

package/src/lib/core/slots/pane-ref.ts

@@ -1,188 +0,0 @@
-import { Type, Injector, InjectionToken } from "@angular/core";
-import { BehaviorSubject, Subject, filter } from "rxjs";
-import { ParamMap, PaneRoute, OpenPolicy } from "../configuration";
-import { Dimentions } from "../models";
-
-export const QUERY_CHAR = ':', PATH_CHAR = ';', ARG_CHAR = '&', PANE_CHAR = '~';
-
-export const PANES_DATA = new InjectionToken<PaneRoute[]>('panes');
-
-export abstract class NavigationBase {
-  _preventDefault: boolean;
-  public preventDefault() {
-    this._preventDefault = true;
-  }
-}
-export class CollapseNavigation extends NavigationBase {
-}
-export class BackNavigation extends NavigationBase {
-}
-export abstract class NavigationPaneBase<T = any> extends NavigationBase {
-  constructor(private _pane: PaneRef<T>) {
-    super();
-  }
-  public get pane(): PaneRef<T> {
-    return this._pane;
-  }
-}
-export class NavigationStart extends NavigationPaneBase {
-}
-/** pane fucus change */
-export class NavigationFocus extends NavigationPaneBase {
-}
-export class NavigationEnd<T = any> extends NavigationPaneBase<T> {
-}
-export class NavigationMode<T = any> extends NavigationPaneBase<T> {
-  constructor(public readonly mode: PaneMode, pane: PaneRef<T>) {
-    super(pane);
-  }
-}
-export class NavigationExpand<T = any> extends NavigationPaneBase<T> {
-  constructor(public readonly expended: boolean, pane: PaneRef<T>) {
-    super(pane);
-  }
-}
-export class NavigationResize<T = any> extends NavigationPaneBase<T> {
-  constructor(public readonly dimentions: Dimentions, pane: PaneRef<T>) {
-    super(pane);
-  }
-}
-export class NavigationClose<T = any> extends NavigationPaneBase<T> {
-}
-export class ParamNavigation<T = any> extends NavigationPaneBase<T> {           
-  constructor(public readonly params: ParamMap, pane: PaneRef<T>) {
-    super(pane);
-  }
-}
-export class QueryParamNavigation<T = any> extends NavigationPaneBase<T> {
-  constructor(public readonly queryParams: ParamMap, pane: PaneRef<T>) {
-    super(pane);
-  }
-}
-                                                  
-export type PaneMode = 'tab' | 'pane';
-
-export interface PaneOptions {
-  title?: string;
-  group?: string;
-  help?: string;
-  state?: any;
-  openPolicy?: OpenPolicy;
-}
-
-export type PaneCommand = 'expand' | 'focus' | 'close' | 'recycle';
-/** */
-export class PaneRef<ComponentType = any, DataType = ParamMap> {
-  readonly _comm$ = new Subject<PaneCommand>();
-  /** */
-  readonly _data$ = new BehaviorSubject<DataType>({} as DataType);
-  readonly _params$ = new BehaviorSubject<ParamMap>({});
-  readonly _queryParams$ = new BehaviorSubject<ParamMap>({});
-  readonly _events$ = new Subject<NavigationBase>();
-  title: string;
-  icon?: string;
-  guide?: string;
-  pinned: boolean;
-  badge?: number;
-  animation: string;
-  group: string;
-  help: string;
-  _expanded: boolean;
-  _instance: ComponentType;
-  _path: string;
-  _queryString: string;
-  _mode: PaneMode;
-  private _injector: Injector;
-  private _expandable: boolean;
-  private _stretchable: boolean;
-  get expandable() { return this._expandable;}
-  get injector() { return this._injector; }
-  get expanded() { return this._expanded; }
-  get fullPath() { return (this._path || '') + (this._queryString ? (QUERY_CHAR + this._queryString) : '') }
-  get instance(): ComponentType { return this._instance; }
-  get data() { return this._data$.value; }
-  get dataChange() { return this._data$.asObservable(); }
-  get params() { return this._params$.value; }
-  get paramsChange() { return this._params$.asObservable(); }
-  get queryString() { return this._queryString; }
-  get queryParams() { return this._queryParams$.value; }
-  get queryParamsChange() { return this._queryParams$.asObservable(); }
-  get events() { return this._events$.asObservable(); }
-  get resized() { return this.events.pipe(filter(e => e instanceof NavigationResize)); }
-  get closing() { return this.events.pipe(filter(e => e instanceof NavigationClose)); }
-  get expandeding() { return this.events.pipe(filter(e => e instanceof NavigationExpand)); }
-  get path() { return this._path; };
-  get mode() { return this._mode; };
-  get parent() { return this._options.parent; };
-  get stretchable() { return this._stretchable; };
-  set stretchable(val: boolean) { this._stretchable = val; }
-  get dialog() { return this._options.dialog; };
-  get dismissable() { return this._options.dismissable; };
-  get route() { return this._options.route; };
-  constructor(public component: Type<any>,
-    injector: Injector,
-    private _options: {
-      path?: string;
-      route?: PaneRoute;
-      title?: string;
-      group?: string;
-      guide?: string;
-      icon?: string;
-      animation?: string;
-      help?: string;
-      mode: PaneMode,
-      expanded?: boolean;
-      dialog?: boolean;
-      stretchable?: boolean;
-      parent?: PaneRef<any>;
-      queryString?: string;
-      data?: DataType;
-      params?: ParamMap;
-      queryParams?: ParamMap;
-      expandable?: boolean,
-      dismissable?: boolean
-    }) {
-    const { stretchable, mode, data, params, queryParams, path, queryString, title, group, icon, help, guide, animation, expanded, expandable } = _options;
-    this._path = path;
-    this._mode = mode;
-    this._stretchable = stretchable;
-    this._expanded = expanded;
-    this._queryString = queryString;
-    this._expandable = expandable !== false;
-    this._injector = Injector.create([
-      { provide: PaneRef, useValue: this }
-    ], injector);
-    this.title = title;
-    this.group = group;
-    this.guide = guide;
-    this.help = help;
-    this.icon = icon;
-    this.animation = animation;
-    data && this._data$.next(data);
-    params && this._params$.next(params);
-    queryParams && this._queryParams$.next(queryParams);
-  }
-  decendentOf(pane: PaneRef<any>) {
-    return this.parent === pane //||
-    //  (this.path && pane.path && this.path.startsWith(pane.path));
-  }
-  recycle() {
-    this._comm$.next('recycle');
-  }
-  focus() {
-    this._comm$.next('focus');
-  }
-  close() {
-    this._comm$.next('close');
-  }
-  expand() {
-    this._comm$.next('expand');
-  }
-  _destroy() {
-    this._comm$.complete();
-    this._data$.complete();
-    this._params$.complete();
-    this._queryParams$.complete();
-    this._events$.complete();
-  }
-}

package/src/lib/core/slots/router.directive.ts

@@ -1,53 +0,0 @@
-import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { OpenPolicy } from '../configuration';
-import { PanesRouter } from './router.service';
-import { NavigationFocus, NavigationStart, ParamNavigation, PaneOptions } from './pane-ref';
-import { isArray } from '../functions';
-
-@Directive({
-  selector: '[slotRouterLink]',
-  host: {
-    '(click)': '_navigate()'
-  }
-})
-export
-  class SlotRouterDirective implements OnInit, OnDestroy {
-  private _link!: string[];
-  public get link(): string | string[] {
-    return this._link;
-  }
-  @Input('slotRouterLink')
-  public set link(value: string | string[]) {
-    this._link = isArray(value) ? value : [value];
-  }
-  /** css class */
-  @Input('slotRouterLinkActive') active?: string = 'active';
-  @Input('slotRouterLinkDisabled') disabled?= false;
-  @Input('slotRouterLinkPolicy') policy?: OpenPolicy;
-  @Input('slotRouterLinkOptions') options?: PaneOptions;
-  private readonly _destroy = new Subject<void>();
-  constructor(
-    private _element: ElementRef<HTMLElement>,
-    private _router: PanesRouter) { }
-  ngOnInit(): void {
-    const path = this._link.join('/');
-    this._router.events.pipe(takeUntil(this._destroy)).subscribe(e =>
-      (e instanceof NavigationStart || e instanceof ParamNavigation || e instanceof NavigationFocus) && e.pane.path && e.pane.mode === 'pane'
-      && this._toggle(e.pane.fullPath.startsWith(path))
-    );
-  }
-  private _toggle(val: boolean) {
-    if (val)
-      this._element.nativeElement.classList.add(this.active);
-    else this._element.nativeElement.classList.remove(this.active);
-  }
-  _navigate() {
-    !this.disabled && this._router.navigate(this._link, { policy: this.policy, ...this.options });
-  }
-  ngOnDestroy(): void {
-    this._destroy.next();
-    this._destroy.complete();
-  }
-}

package/src/lib/core/slots/router.service.ts

@@ -1,53 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ComponentType } from '@angular/cdk/portal';
-import { Subject } from 'rxjs';
-import { filter, first } from 'rxjs/operators';
-import { OpenPolicy } from '../configuration';
-import { isArray } from '../functions';
-import { NavigationStart, NavigationBase, PaneRef } from './pane-ref';
-
-export type RouterCommand = 'collapse';
-@Injectable({ providedIn: 'root' })
-export
-  class PanesRouter {
-  readonly _events$ = new Subject<NavigationBase>();
-  readonly _comm$ = new Subject<RouterCommand>();
-
-  readonly _navigate$ = new Subject<{
-    commands?: any[],
-    component?: ComponentType<any>,
-  } & NavigationOptions>();
-  constructor(
-  ) {
-  }
-  //replace(url: string) {
-  //  history.pushState({}, '', url);
-  //}
-  navigate(commands: (string|number)[] , options?: NavigationOptions) 
-  navigate<T>(commands: ComponentType<T>, options?: NavigationOptions)
-  navigate<T>(commands: (string | number)[] | ComponentType<T>, options?: NavigationOptions): Promise<PaneRef<T>> {
-    return new Promise<PaneRef<T>>((resolve, reject) => {
-      this._events$.pipe(filter(e => e instanceof NavigationStart), first()).subscribe((e: NavigationStart) =>
-        resolve(e.pane), reject);
-      this._navigate$.next(isArray(commands) ? { commands, ...options } : { component: commands, ...options });
-    });
-  }
-  get events() { return this._events$.asObservable() }
-  collapse() {
-    this._comm$.next('collapse');
-  }
-}
-
-export interface NavigationOptions {
-  state?: any;
-  queryParams?: { [name: string]: any };
-  icon?: string;
-  pathMode?: 'relative',
-  relativeTo?: PaneRef,
-  animation?: string;
-  title?: string;
-  help?: string;
-  group?: string;
-  policy?: OpenPolicy;
-  expandable?: boolean;
-}

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

@@ -1,49 +0,0 @@
-import { Component, ComponentFactoryResolver, EventEmitter, Host, Injector, Input, OnDestroy, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
-import { animate, animateChild, AnimationBuilder, AnimationFactory, AnimationOptions, query, stagger, state, style, transition, trigger } from '@angular/animations';
-import { PaneRef } from './pane-ref';
-import { SlotsComponent } from './slots.component';
-
-export const paramAnimation = trigger('param', [state('*', style({ backgroundColor: 'unset', transform: 'scale(1)' })),
-transition('*<=>*', animate(200,
-  style({ backgroundColor: 'unset', transform: 'scale(1)' })))]);
-
-export const queryAnimation = trigger('query', [state('*', style({})),
-transition('*<=>*', animate(0, style({})))]);
-
-@Component({
-    selector: 'bizdoc.pane',
-    templateUrl: './slot.component.html',
-    styleUrls: ['./slot.component.scss'],
-    animations: [
-        paramAnimation,
-        queryAnimation
-    ]
-})
-export class SlotComponent implements OnInit, OnDestroy {
-    @Input() slot!: PaneRef<any>;
-    @Output() readonly pinned = new EventEmitter<boolean>();
-    @ViewChild('container', { static: true }) _container: ViewContainerRef;
-  constructor(
-    _builder: AnimationBuilder,
-      @Host() _slots: SlotsComponent,
-        private _injector: Injector,
-    private _cf: ComponentFactoryResolver) {
-   // _builder.build().create(el).play();
-  }
-    ngOnInit(): void {
-        const factory = this._cf.resolveComponentFactory(this.slot.component);
-        const injector = Injector.create([
-            { provide: SlotsComponent, useValue: this },
-            { provide: PaneRef, useValue: this.slot }
-        ], this._injector);
-        const cRef = this._container.createComponent(factory, 0, injector);
-        this.slot._instance = cRef.instance;
-    }
-    togglePinned() {
-        this.slot.pinned = !this.slot.pinned;
-        this.pinned.emit(this.slot.pinned);
-    }
-    ngOnDestroy(): void {
-        this.slot._destroy();
-    }
-}

package/src/lib/core/slots/slot.component.html

@@ -1,15 +0,0 @@
-<div class="slot-header" *ngIf="!slot.full" cdkDragHandle>
-  <span class="divider"></span>
-  <div>
-    <ng-container *ngIf='slot.pinnable'>
-      <button mat-icon-button (click)="togglePinned()"><mat-icon [class.filled]="slot.pinned">push_pin</mat-icon></button>
-      <button mat-icon-button (click)="toggleFill()"><mat-icon>{{slot.filled ? 'fullscreen_exit' : 'fullscreen'}}</mat-icon></button>
-    </ng-container>
-    <button mat-icon-button (click)="slot.close()"><mat-icon>close</mat-icon></button>
-  </div>
-</div>
-<div class="slot-content"
-     [@param]="slot.path"
-     [@query]="slot.queryString">
-  <ng-container #container></ng-container>
-</div>

package/src/lib/core/slots/slot.component.scss

@@ -1,18 +0,0 @@
-.slot-container {
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  border-right: 1px solid #00000014;
-  height: 100%;
-  border-left-width: 1px;
-  border-left-style: double;
-  border-left-color: transparent;
-  flex-shrink: 1;
-}
-.slot-content {
-  -ms-flex: 1 auto;
-  -webkit-flex: 1 auto;
-  flex: 1 auto;
-  overflow-y: auto;
-}

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

@@ -1,68 +0,0 @@
-<div class="panes">
-  <div class="scroll-arrow" (click)="scrollBy(-400)" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true" [matRippleColor]="accent"
-       *ngIf="prev">
-    <i class="material-icons mat-icon-rtl-mirror">
-      arrow_back_ios
-    </i>
-  </div>
-  <div class="panes-title" [@title]="titleAnimation">
-    <h1>
-      <button mat-icon-button (click)="back()" *ngIf="swap" [bizdocTooltip]="'Back'|translate"><mat-icon class="mat-icon-rtl-mirror">arrow_circle_left</mat-icon></button>
-      <ng-container *ngFor="let p of panes; let first = first">
-        <span class="breadcrumbs" *ngIf="!first">\</span>
-        {{p.title}}
-      </ng-container>
-      <button mat-icon-button (click)="guide(panes[0].guide)" *ngIf="panes[0]?.guide" [bizdocTooltip]="'Help'|translate"><mat-icon>help</mat-icon></button>
-    </h1>
-    <span class="divider">
-    </span>
-    <bizdoc-quicktools></bizdoc-quicktools>
-  </div>
-  <div #panning class="panes-container"
-       cdkScrollable
-       @panes
-       (scroll)="enableNavigationArrows($event)">
-    <ng-container *ngFor="let p of panes; let i = index">
-      <div (mouseenter)="selectedIndex !== i && !dragging && select(i)"
-           (click)="select(i)"
-           [class.active]="selectedIndex === i" class="pane-content" @pane>
-        <ngx-component-outlet [type]="p.component" [injector]="p.injector" (create)="p._instance = $event"></ngx-component-outlet>
-      </div>
-      <div class="pane-separator" *ngIf="i < panes.length - 1" (mousedown)="onPaneResize(p, $event)">&nbsp;</div>
-    </ng-container>
-  </div>
-  <div class="backdrop" *ngIf="dialog" (click)="closeTab(selectedTabIndex)"></div>
-  <div class="scroll-arrow forward"
-       *ngIf="next">
-    <i class="material-icons mat-icon-rtl-mirror" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true" [matRippleRadius]="30" [matRippleColor]="accent"
-       (click)="scrollBy(400)">
-      arrow_forward_ios
-    </i>
-  </div>
-</div>
-<ng-container *ngIf="tabs.length">
-  <div class="tabs-separator" (mousedown)="onTabResize($event)">&nbsp;</div>
-  <div class="mat-elevation-z18 tabs" [@tabs]="tabsAnimation" (@tabs.done)="done()" #tabing>
-    <div class="row tabs-title">
-      <button mat-icon-button (click)="tabBack()" *ngIf="swapTab" [bizdocTooltip]="prevGroup || ('Back'|translate)"><mat-icon class="mat-icon-rtl-mirror">arrow_back</mat-icon></button>
-      <h2>{{group}}</h2>
-      <button mat-icon-button (click)="expandTab()" [bizdocTooltip]="'Expand'| translate"><mat-icon inline="true" class="mat-icon-rtl-mirror">open_in_full</mat-icon></button>
-      <!--*ngIf="selectedTabIndex <=< -1 && tabs[selectedTabIndex].expandable"-->
-      <span class="divider"></span>
-      <button mat-icon-button (click)="collapse()" bizdocTooltip="Esc"><mat-icon>close</mat-icon></button>
-    </div>
-    <nav mat-tab-nav-bar color="accent" [disablePagination]="true">
-      <a mat-tab-link *ngFor="let t of tabs; let i = index" class="mat-tab-link"
-         (click)="selectedTabIndex = i"
-         [active]="selectedTabIndex === i">
-        <mat-icon [matBadge]="t.badge" [matBadgeHidden]="!t.badge" matBadgeSize="small" matBadgeColor="accent">{{t.icon}}</mat-icon>&nbsp;
-        {{t.title}}
-        <mat-icon *ngIf="t.dismissable" (click)="closeTab(i)" class="tool">close</mat-icon>
-        <!--inline="true"-->
-      </a>
-    </nav>
-    <div *ngFor="let t of tabs; let i = index" [style.display]="selectedTabIndex === i ? '': 'none'" class="tab" [@tab]="selectedTabIndex">
-      <ngx-component-outlet [type]="t.component" [injector]="t.injector" (create)="t._instance = $event"></ngx-component-outlet>
-    </div>
-  </div>
-</ng-container>

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

@@ -1,163 +0,0 @@
-:host {
-  display: flex;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  /*  height: 100%;
-  width: 100%;
-*/
-  -webkit-flex-grow: 1;
-  flex-grow: 1;
-  overflow-x: hidden;
-}
-
-.panes {
-  flex-grow: 1;
-  position: relative;
-  overflow-x: hidden;
-  display: inline-flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  flex-basis: 100%;
-
-  .panes-title {
-    display: flex;
-    -ms-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-    align-items: center;
-    min-width: max-content;
-
-    h1 {
-      font-size: xx-large;
-      margin: 12px;
-      font-weight: 100;
-
-      button {
-        vertical-align: middle;
-      }
-
-      .breadcrumbs {
-        font-size: smaller;
-      }
-    }
-  }
-
-  .scroll-arrow {
-    position: absolute;
-    cursor: pointer;
-    top: 50%;
-    z-index: 1000;
-
-    i {
-      font-size: 50px;
-      opacity: .2;
-
-      &:hover {
-        opacity: .9;
-      }
-    }
-
-    &:last-child {
-      right: 0;
-    }
-  }
-
-  .panes-container {
-    overflow-x: auto;
-    height: 100%;
-    display: flex;
-    -ms-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-
-    .pane-content {
-      display: block;
-      border-right: 1px solid #00000014;
-      height: inherit;
-      border-left-width: 1px;
-      border-left-style: double;
-      border-left-color: transparent;
-      -webkit-flex-grow: 1;
-      flex-grow: 1;
-      min-width: 420px;
-      overflow-y: auto;
-
-      .pane {
-        flex-grow: 1;
-      }
-    }
-
-    .pane-separator {
-      width: 8px;
-    }
-  }
-}
-
-.pane-separator, .tabs-separator {
-  cursor: ew-resize;
-  /*e-resize*/
-  /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='30'><path d='M2 0 v30' fill='none' stroke='black'/></svg>");*/
-  background-repeat: no-repeat;
-  background-position: center;
-  display: table;
-  height: 100%;
-  /* Prevent the browser's built-in drag from interfering */
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.tabs-separator {
-  width: 12px;
-}
-
-::ng-deep [dir=rtl] .scroll-arrow:last-child {
-  right: unset;
-  left: 0;
-}
-
-.tabs {
-  display: flex;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  z-index: 1;
-  -webkit-flex-grow: 0;
-  flex-shrink: 1;
-  flex-basis: 0;
-
-  .tabs-title {
-    align-items: center;
-
-    h2 {
-      font-size: x-large;
-      margin: 9px;
-      font-weight: 100;
-    }
-    /*opacity: .2;*/
-
-    &:hover {
-      opacity: 1
-    }
-  }
-
-  .mat-tab-link {
-    .tool {
-      opacity: 0
-    }
-
-    &:hover .tool {
-      opacity: 1
-    }
-  }
-
-  .tab {
-    -webkit-flex-grow: 1;
-    flex-grow: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-  }
-}