@bizdoc/core 1.13.12 → 1.13.13

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

@@ -1,162 +0,0 @@
-import { ComponentPortal } from "@angular/cdk/portal";
-import { Type, Injector, InjectionToken } from "@angular/core";
-import { BehaviorSubject, Subject } 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 { }
-export class CollapseNavigation extends NavigationBase {
-}
-export class BackNavigation extends NavigationBase {
-}
-export abstract class NavigationPaneBase extends NavigationBase {
-  constructor(private _pane: PaneRef<any>) {
-    super();
-  }
-  public get pane(): PaneRef<any> {
-    return this._pane;
-  }
-}
-export class NavigationStart extends NavigationPaneBase {
-}
-export class NavigationSelected extends NavigationPaneBase {
-}
-export class NavigationEnd extends NavigationPaneBase {
-}
-export class ParamNavigation extends NavigationPaneBase {
-  constructor(public readonly params: ParamMap, slot: PaneRef<any>) {
-    super(slot);
-  }
-}
-export class QueryParamNavigation extends NavigationPaneBase {
-  constructor(public readonly queryParams: ParamMap, slot: PaneRef<any>) {
-    super(slot);
-  }
-}
-
-export interface PaneOptions {
-  title?: string;
-  group?: string;
-  help?: string;
-  state?: { [name: string]: any };
-  openPolicy?: OpenPolicy;
-}
-
-export type PaneAction = 'expand' | 'focus' | 'close';
-
-export class PaneRef<T = any> {
-  readonly _comm$ = new Subject<string>();
-  /** */
-  readonly _data$ = new BehaviorSubject<ParamMap>({});
-  readonly _params$ = new BehaviorSubject<ParamMap>({});
-  readonly _queryParams$ = new BehaviorSubject<ParamMap>({});
-  readonly _resize$ = new BehaviorSubject<Dimentions>({} as any);
-  _fullscreen$: BehaviorSubject<boolean>;
-  _mode$: BehaviorSubject<'tab' | 'pane'>;
-  title: string;
-  icon?: string;
-  guide?: string;
-  _instance: T;
-  _path: string;
-  _queryString: string;
-  _injector: Injector;
-  _portal: ComponentPortal<T>;
-  pinned: boolean;
-  badge?: number;
-  animation: string;
-  group: string;
-  help: string;
-  expandable = true;
-  public get injector(): Injector {
-    return this._injector;
-  }
-  public get fullscreen() {
-    return this._fullscreen$.value;
-  }
-  public get fullscreenChange() {
-    return this._fullscreen$.asObservable();
-  }
-  get fullPath() { return this._path + (this._queryString ? (QUERY_CHAR + this._queryString) : '') }
-  get instance(): T { return this._instance; }
-  get data(): any { return this._data$.value; }
-  get dataChange() { return this._data$.asObservable(); }
-  get params(): ParamMap { return this._params$.value; }
-  get resize() { return this._resize$.asObservable(); }
-  get paramsChange() { return this._params$.asObservable(); }
-  get queryString() { return this._queryString; }
-  get queryParams() { return this._queryParams$.value; }
-  get queryParamsChange() { return this._queryParams$.asObservable(); }
-  get path() { return this._path; };
-  get modeChange() { return this._mode$.asObservable(); };
-  get mode() { return this._mode$.value; };
-  get parent() { return this._options.parent; };
-  get dialog() { return this._options.dialog; };
-  get dismissable() { return this._options.dismissable; };
-  get route() { return this._options.route; };
-  constructor(public component: Type<any>,
-    mode: 'tab' | 'pane',
-    private _options: {
-      path?: string;
-      route?: PaneRoute;
-      title?: string;
-      group?: string;
-      guide?: string;
-      icon?: string;
-      animation?: string;
-      help?: string;
-      fullscreen?: boolean;
-      dialog?: boolean;
-      parent?: PaneRef<any>;
-      queryString?: string;
-      data?: ParamMap;
-      params?: ParamMap;
-      queryParams?: ParamMap;
-      expandable?: boolean,
-      dismissable?: boolean
-    }) {
-    const { data, params, queryParams, path, queryString, title, group, icon, help, guide, animation, fullscreen, expandable } = _options;
-    this._mode$ = new BehaviorSubject(mode);
-    this._fullscreen$ = new BehaviorSubject(fullscreen);
-    this._path = path || '';
-    this.title = title;
-    this.group = group;
-    this.guide = guide;
-    this.help = help;
-    this.icon = icon;
-    this.animation = animation;
-    this._queryString = queryString;
-    if (expandable === false) this.expandable = false;
-    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));
-  }
-  refresh() {
-    this._comm$.next('refresh');
-  }
-  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._resize$.complete();
-    this._queryParams$.complete();
-    this._fullscreen$.complete();
-    this._mode$.complete();
-  }
-}

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

@@ -1,55 +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 { NavigationSelected, 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 NavigationSelected) && e.pane.path && e.pane.mode === 'pane'
-      && this._toggle(e.pane.fullPath.startsWith(path))
-    );
-    this._router.active && this._router.active.path && this._router.active.fullPath.startsWith(path) &&
-      this._toggle(true);
-  }
-  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,54 +0,0 @@
-import { ComponentType } from '@angular/cdk/portal';
-import { Injectable, Type } from '@angular/core';
-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';
-
-@Injectable({ providedIn: 'root' })
-export
-  class PanesRouter {
-  readonly _events$ = new Subject<NavigationBase>();
-  readonly _comm$ = new Subject<string>();
-  _active: PaneRef;
-  public get active(): PaneRef {
-    return this._active;
-  }
-
-  readonly _navigate$ = new Subject<{
-    commands?: any[],
-    component?: ComponentType<any>,
-  } & NavigationOptions>();
-  constructor(
-  ) {
-  }
-  //replace(url: string) {
-  //  history.pushState({}, '', url);
-  //}
-  navigate(commands: any[] | ComponentType<any>, options?: NavigationOptions) {
-    return new Promise<PaneRef<any>>((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,67 +0,0 @@
-<div class="panes">
-  <div class="backdrop" [style.display]="dialog ? '' : 'none'"></div>
-  <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 #paning class="panes-container"
-       cdkScrollable
-       @panes
-       (scroll)="navigationArrows($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)="onResize(p, $event)">&nbsp;</div>
-    </ng-container>
-  </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>
-      <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 p of tabs; let i = index" class="mat-tab-link"
-         (click)="selectedTabIndex = i"
-         [active]="selectedTabIndex === i">
-        <mat-icon [matBadge]="p.badge" [matBadgeHidden]="!p.badge" matBadgeSize="small" matBadgeColor="accent">{{p.icon}}</mat-icon>&nbsp;
-        {{p.title}}
-        <mat-icon *ngIf="p.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;
-  }
-}