@bizdoc/core 1.14.8 → 1.14.9

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

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

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

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

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

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

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

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

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