@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/core/slots/_slots-theme.scss

@@ -0,0 +1,142 @@
+@mixin slots-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $separator-background: mat-color($accent, dialog);
+  $active-background: mat-color($background, dialog);
+
+  .panes {
+    .panes-title {
+      color: mat-color($foreground, text);
+
+      .mat-icon {
+        /*font-size: 39px;*/
+        /*        width: auto;
+        margin: 0;
+        padding: 0;
+        height: auto;
+*/ /*vertical-align: text-bottom;*/
+      }
+
+      .tool {
+        opacity: .1
+      }
+
+      &:hover .tool {
+        opacity: 1
+      }
+    }
+
+    .backdrop {
+      position: fixed;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      display: block;
+      display: none;
+      background: mat-color($mat-gray, 600);
+      opacity: .8;
+    }
+  }
+
+  .pane {
+    display: flex;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    overflow-x: hidden;
+    flex-grow: 1;
+
+    .mat-toolbar > * {
+      opacity: .1;
+    }
+
+    &:hover, &.active {
+      .mat-toolbar > * {
+        opacity: 1;
+      }
+    }
+  }
+
+  .tabs {
+    color: mat-color($foreground, text);
+    background: if($is-dark-theme, #212121, mat-color($background, card));
+
+    .tabs-title {
+      height: 60px;
+      padding: 0 8px;
+    }
+
+    .mat-tab-link-container {
+      overflow-x: auto;
+      border-bottom: 1px solid lightgray;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none; /* Firefox */
+    }
+
+    .tab {
+      /*      .mat-toolbar > * {
+        opacity: .1;
+      }
+
+      &:hover {
+        .mat-toolbar > * {
+          opacity: 1;
+        }
+      }
+*/
+      &:not(:hover) {
+        .mat-toolbar {
+          background-color: transparent;
+        }
+      }
+
+      .pane {
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+      }
+    }
+  }
+
+
+  .pane-content {
+
+    &.active {
+      /*background-color: $active-background;*/
+      border-left-color: mat-color($primary, 500);
+      box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
+    }
+
+    &:not(.active) {
+      .mat-toolbar {
+        background-color: transparent;
+      }
+    }
+  }
+
+  [dir=rtl] .pane-content {
+    border-left: none;
+    border-right-width: 1px;
+    border-right-style: double;
+    border-right-color: transparent;
+
+    &.active {
+      border-right-color: mat-color($primary, 500);
+    }
+  }
+
+  [dir=rtl] .panes {
+    .scroll-arrow:last-child {
+      right: auto !important;
+      left: 0 !important
+    }
+  }
+}

package/src/lib/core/slots/extended-tab.component.exp.ts

@@ -0,0 +1,35 @@
+import { Component, Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export interface NavigatingEvent {
+  component;
+}
+@Injectable()
+export 
+  class TabsService {
+readonly  _navigating = new Subject<NavigatingEvent>();
+  navigate(component) {
+    this._navigating.next({component})
+  }
+}
+
+
+export class TabRef<T = any> {
+  readonly _stateChange = new Subject<void>();
+  private _title: string;
+    public get title(): string {
+        return this._title;
+    }
+    public set title(value: string) {
+      this._title = value;
+      this._stateChange.next();
+    }
+
+}
+
+@Component({
+  selector: 'bizdoc-tabs',
+  templateUrl: 'extended-tab.component.html'})
+export class ExtendedTabComponent {
+  tabs: TabRef[];
+}

package/src/lib/core/slots/intro.pane.component.exp.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { GuideService } from '../guide/guide.service';
+import { SessionService } from '../session.service';
+
+@Component({
+  selector: 'bizdoc-intro.pane',
+  templateUrl: './intro.pane.component.html',
+  styleUrls: ['./intro.pane.component.scss'],
+  host: {
+    class: 'pane'
+  },
+  animations: []
+})
+export class IntroSlotComponent {
+  constructor(private _session: SessionService,
+    private _guide: GuideService) {
+    this._session.profile.forms.filter(f => f.creatable).length;
+  }
+  dismiss() { }
+  intro() {
+    this._guide.start('intro');
+  }
+}

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

@@ -0,0 +1,22 @@
+<h2 class="mat-display-1">Get started!</h2>
+
+<h4>Things you can do:</h4>
+<ul>
+  <li>
+    <a slotRouterLink="new">new...</a>
+
+  </li>
+  <li>
+    <a slotRouterLink="mailbox">browse...</a>
+
+  </li>
+</ul>
+
+<p>
+  Take an
+  <a (click)='intro()'>introdoction</a> tour of your options with BizDoc.
+</p>
+
+<div style="-webkit-align-items: end; align-items: end; width: 100%">
+  <button mat-stroked-button (click)="dismiss()">{{'Dismiss' | translate}}</button>
+</div>

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

@@ -0,0 +1,8 @@
+:host {
+  padding: 8px;
+  min-width: 200px;
+}
+
+p {
+  max-width: 300px;
+}

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

@@ -0,0 +1,156 @@
+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'>;
+  public get fullscreen() {
+    return this._fullscreen$.value;
+  }
+  public get fullscreenChange() {
+    return this._fullscreen$.asObservable();
+  }
+  title: string;
+  icon?: string;
+  guide?: string;
+  _instance: T;
+  _path: string;
+  _queryString: string;
+  _injector: Injector;
+  _portal: ComponentPortal<T>;
+  width: string;
+  pinned: boolean;
+  badge?: number;
+  animation: string;
+  group: string;
+  help: string;
+  public get injector(): Injector {
+    return this._injector;
+  }
+  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 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;
+ }) {
+    const { data, params, queryParams, path, queryString, title, group, icon, help, guide, animation, fullscreen } = _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;
+
+    this._data$.next(data);
+    params && this._params$.next(params);
+    queryParams && this._queryParams$.next(queryParams);
+  }
+  decendentOf(slot: PaneRef<any>) {
+    return this.parent === slot //||
+    //  (this.path && slot.path && this.path.startsWith(slot.path));
+  }
+  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

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

@@ -0,0 +1,67 @@
+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>,
+    toggle?: boolean,
+  } & NavigationOptions>();
+  constructor(
+  ) {
+  }
+  toggle(commands: any[] | Type<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,
+        toggle: true
+      } : {
+        component: commands, ...options,
+        toggle: true
+      });
+    });
+  }
+  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;
+}

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, undefined, 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,65 @@
+<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" [matTooltip]="'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">
+        <mat-icon class="mat-icon-rtl-mirror" *ngIf="!first">arrow_forward_ios</mat-icon>
+        {{p.title}}
+      </ng-container>
+      <button mat-icon-button (click)="guide(panes[0].guide)" *ngIf="panes[0]?.guide" [matTooltip]="'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($event)" #tabing>
+    <div class="row tabs-title">
+      <button mat-icon-button (click)="tabBack()" *ngIf="swapTab" [matTooltip]="prevGroup || ('Back'|translate)"><mat-icon class="mat-icon-rtl-mirror">arrow_back</mat-icon></button>
+      <h2>{{group}}</h2>
+      <button mat-icon-button (click)="expandTab()" [matTooltip]="'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()" matTooltip="Esc"><mat-icon>close</mat-icon></button>
+    </div>
+    <nav mat-tab-nav-bar backgroundColor="transparent" 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}}
+      </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>