@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/core/popup/_popup-theme.scss

@@ -0,0 +1,363 @@
+@mixin popup-theme($theme) {
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+
+  $popup-background:  mat.get-color-from-palette($background, dialog);
+  $popup-border-color:  mat.get-color-from-palette($foreground, divider);
+  $popup-tooltip-size: 8px;
+  $popup-margin: 0;
+  $popup-padding: 0;
+  $tooltip-background:  mat.get-color-from-palette($background, tooltip, 0.9);
+  $tooltip-border-color:  mat.get-color-from-palette($background, tooltip, 0.9);
+  $tooltip-color: white; // mat.get-color-from-palette($foreground, text);
+  $guide-background: white;
+  $guide-border-color:  mat.get-color-from-palette($accent, 600);
+
+  .popup-panel {
+    > * {
+      flex-direction: inherit;
+      display: inherit;
+    }
+
+
+    .popup-content {
+      display: inline-table;
+      color:  mat.get-color-from-palette($foreground, text);
+      min-width: 52px;
+      background: $popup-background;
+      border-radius: 2px;
+      border: 2px solid $popup-border-color;
+      box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .1);
+
+      > * {
+        display: flex;
+        -ms-flex-direction: column;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+        -ms-flex: 1 auto 1;
+        -webkit-flex: 1 auto 1;
+      }
+
+      .mat-nav-list, form, p {
+        z-index: 1;
+      }
+    }
+
+    .tooltip-container {
+      display: none;
+
+      .tooltip {
+        display: block;
+        position: relative;
+        width: 0;
+        height: 0;
+        border: $popup-tooltip-size solid transparent;
+
+        &:after {
+          content: '\00a0';
+          position: absolute;
+          width: 0;
+          height: 0;
+          border: $popup-tooltip-size solid transparent;
+        }
+      }
+    }
+
+    &.start, &.center, &.end {
+      .tooltip-container {
+        display: flex;
+      }
+    }
+
+    &.center .tooltip-container {
+      align-self: center;
+      align-items: center;
+    }
+
+    &.end .tooltip-container {
+      align-self: flex-end;
+      align-items: flex-end;
+    }
+
+    &.before, &.after {
+      &.start .tooltip {
+        margin-top: 4px;
+      }
+
+      &.center .tooltip {
+      }
+
+      &.end .tooltip {
+        margin-bottom: 19px;
+      }
+    }
+
+    &.above, &.below {
+      margin-left: $popup-padding;
+      margin-right: $popup-padding;
+
+      &.start .tooltip {
+        margin-left: 19px;
+      }
+
+      &.end .tooltip {
+        margin-right: 6px;
+      }
+    }
+
+    &.above .tooltip, &.after .tooltip {
+    }
+
+    &.before {
+      -ms-flex-direction: row;
+      -webkit-flex-direction: row;
+      flex-direction: row;
+
+      .tooltip {
+        border-left-color: $popup-border-color;
+
+        &:after {
+          border-left-color: $popup-background;
+          left: -11px;
+          top: -8px;
+        }
+      }
+    }
+
+    &.after {
+      margin-left: $popup-margin;
+      -ms-flex-direction: row-reverse;
+      -webkit-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+
+      .tooltip {
+        border-right-color: $popup-border-color;
+
+        &:after {
+          border-right-color: $popup-background;
+          left: -6px;
+          top: -8px;
+        }
+      }
+    }
+
+    &.above {
+      margin-top: $popup-padding;
+      -ms-flex-direction: column;
+      -webkit-flex-direction: column;
+      flex-direction: column;
+
+      .tooltip {
+        border-top-color: $popup-border-color;
+
+        &:after {
+          left: -8px;
+          top: -11px;
+          border-top-color: $popup-background;
+        }
+      }
+    }
+
+    &.below {
+      margin-bottom: $popup-padding;
+      -ms-flex-direction: column-reverse;
+      -webkit-flex-direction: column-reverse;
+      flex-direction: column-reverse;
+
+      .tooltip {
+        border-bottom-color: $popup-border-color;
+
+        &:after {
+          left: -8px;
+          top: -6px;
+          border-bottom-color: $popup-background;
+        }
+      }
+    }
+  }
+
+  [dir=rtl] .popup-panel {
+    &.above.start .tooltip, &.below.start .tooltip {
+      margin-right: 8px;
+      margin-left: unset;
+    }
+
+    &.above.end .tooltip, &.below.end .tooltip {
+      margin-left: 19px;
+    }
+
+    &.before {
+      margin-right: -14px;
+
+      .tooltip {
+        border-left-color: transparent !important;
+        border-right-color: $popup-border-color;
+
+        &:after {
+          left: -6px;
+          border-left-color: transparent !important;
+          border-right-color: $popup-background;
+        }
+      }
+    }
+
+    &.after {
+      margin-left: unset;
+      margin-right: $popup-margin;
+
+      .tooltip {
+        border-right-color: transparent !important;
+        border-left-color: $popup-border-color;
+
+        &:after {
+          left: -11px;
+          border-right-color: transparent !important;
+          border-left-color: $popup-background;
+        }
+      }
+    }
+  }
+
+  .tooltip-panel {
+    .popup-content {
+      /*opacity: .9;*/
+      min-width: auto !important;
+      background-color: $tooltip-background;
+      color: $tooltip-color;
+      border: none;
+      padding: 4px 8px;
+      cursor: default;
+      font-size: small;
+      display: inline-block;
+    }
+
+    .tooltip-container {
+      .tooltip {
+        /*opacity: .9;*/
+        &:after{
+            display: none;
+        }
+      }
+    }
+
+    &.before {
+      .tooltip {
+        border-left-color: $tooltip-border-color;
+
+        &:after {
+          border-left-color: $tooltip-background;
+        }
+      }
+    }
+
+    &.after {
+      .tooltip {
+        border-right-color: $tooltip-border-color;
+
+        &:after {
+          border-right-color: $tooltip-background;
+        }
+      }
+    }
+
+    &.above {
+      .tooltip {
+        border-top-color: $tooltip-border-color;
+
+        &:after {
+          border-top-color: $tooltip-background;
+        }
+      }
+    }
+
+    &.below {
+      .tooltip {
+        border-bottom-color: $tooltip-border-color;
+
+        &:after {
+          border-bottom-color: $tooltip-background;
+        }
+      }
+    }
+  }
+
+  [dir=rtl] .tooltip-panel {
+    &.before {
+      .tooltip {
+        border-left-color: transparent !important;
+        border-right-color: $tooltip-border-color;
+
+        &:after {
+          border-left-color: transparent !important;
+          border-right-color: $tooltip-background;
+        }
+      }
+    }
+
+    &.after {
+      .tooltip {
+        border-right-color: transparent !important;
+        border-left-color: $tooltip-border-color;
+
+        &:after {
+          border-right-color: transparent !important;
+          border-left-color: $tooltip-background;
+        }
+      }
+    }
+  }
+  /*.guide-panel {
+    .popup-content {
+    }
+
+    .tooltip-container {
+      .tooltip {*/
+  /*opacity: .9;*/
+  /*}
+    }
+
+    &.before {
+      flex-direction: row;
+
+      .tooltip {
+        border-left-color: $guide-border-color;
+
+        &:after {
+          border-left-color: $guide-background;
+        }
+      }
+    }
+
+    &.after {
+      .tooltip {
+        border-right-color: $guide-border-color;
+
+        &:after {
+          border-right-color: $guide-background;
+        }
+      }
+    }
+
+    &.above {
+      .tooltip {
+        border-top-color: $guide-border-color;
+
+        &:after {
+          border-top-color: $guide-background;
+        }
+      }
+    }
+
+    &.below {
+      .tooltip {
+        border-bottom-color: $guide-border-color;
+
+        &:after {
+          border-bottom-color: $guide-background;
+        }
+      }
+    }
+  }*/
+}

package/src/lib/core/popup/popup-ref.ts

@@ -0,0 +1,19 @@
+import { Subject } from 'rxjs';
+
+export class PopupRef<T = any, V = any, D = any> {
+  constructor(private _data: D) { }
+  readonly _opened = new Subject<T>();
+  readonly _closed = new Subject<V>();
+  _instance: T;
+  public get data(): D {
+    return this._data;
+  }
+  get instance(): T { return this._instance; }
+  get opened() { return this._opened.asObservable(); }
+  get closed() { return this._closed.asObservable(); }
+  close(val?: V) { this._closed.next(val); }
+  _destroy() {
+    this._opened.complete();
+    this._closed.complete();
+  }
+}

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

@@ -0,0 +1,6 @@
+<div class="popup-content">
+  <ng-container #container></ng-container>
+</div>
+<div class="tooltip-container">
+  <div class="tooltip"></div>
+</div>

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

@@ -0,0 +1,40 @@
+import { AfterViewInit, Component, ComponentFactoryResolver, Inject, InjectionToken, Injector, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { PopupRef } from "./popup-ref";
+
+export const POPUP_DATA = new InjectionToken('popup');
+
+export interface PopupData<T = any> {
+  data?: any;
+  component?: ComponentType<any> | TemplateRef<T>;
+  template?: TemplateRef<any>;
+}
+
+@Component({
+  selector: 'bizdoc-popup',
+  templateUrl: './popup.component.html'
+})
+export class PopupComponent implements OnInit {
+  @ViewChild('container', {static: true, read: ViewContainerRef }) _container: ViewContainerRef;
+  private _instance: any;
+  constructor(@Inject(POPUP_DATA) private _data: PopupData,
+    private _ref: PopupRef<any>,
+    private _injector: Injector,
+    private _cf: ComponentFactoryResolver) { }
+
+  ngOnInit(): void {
+    const { component, data } = this._data;
+    if (component instanceof TemplateRef) 
+      this._container.createEmbeddedView(component, { $implicit: data });
+    else {
+      const factory =
+        this._cf.resolveComponentFactory(component);
+      const injector = Injector.create([{ provide: POPUP_DATA, useValue: data }], this._injector);
+      const cRef = this._container.createComponent(factory, 0, injector);
+
+      this._instance = this._ref._instance = cRef.instance;
+    }
+    this._ref._opened.next(this._instance);
+  }
+}
+

package/src/lib/core/popup/popup.service.ts

@@ -0,0 +1,156 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal, ComponentType } from '@angular/cdk/portal';
+import { ElementRef, Injectable, Injector, Input, TemplateRef } from '@angular/core';
+import { filter } from 'rxjs/operators';
+import { PopupData, PopupComponent, POPUP_DATA } from './popup.component';
+import { PopupRef } from './popup-ref';
+import { SessionService } from '../session.service';
+
+export const BELOW: ConnectedPosition[] = [{
+  originX: 'center',
+  originY: 'bottom',
+  overlayX: 'center',
+  overlayY: 'top',
+  panelClass: ['below', 'center']
+}, {
+  originX: 'start',
+  originY: 'bottom',
+  overlayX: 'start',
+  overlayY: 'top',
+  panelClass: ['below', 'start']
+}, {
+  originX: 'end',
+  originY: 'bottom',
+  overlayX: 'end',
+  overlayY: 'top',
+  panelClass: ['below', 'end']
+}],
+  ABOVE: ConnectedPosition[] = [
+    {
+      originX: 'center',
+      originY: 'top',
+      overlayX: 'center',
+      overlayY: 'bottom',
+      panelClass: ['above', 'center']
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'end',
+      overlayY: 'bottom',
+      panelClass: ['above', 'end']
+    }, {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      panelClass: ['above', 'start']
+    }],
+  AFTER: ConnectedPosition[] = [
+    {
+      originX: 'end',
+      originY: 'center',
+      overlayX: 'start',
+      overlayY: 'center',
+      panelClass: ['after', 'center']
+    }, {
+      originX: 'end',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'top',
+      panelClass: ['after', 'start']
+    },
+    {
+      originX: 'end',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      panelClass: ['after', 'end']
+    }],
+  BEFORE: ConnectedPosition[] = [{
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'center',
+    panelClass: ['before', 'center']
+  }, {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    panelClass: ['before', 'end']
+  }, {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    panelClass: ['before', 'start']
+  }];
+
+export type Position = 'above' | 'end' | 'start' | 'below';
+
+@Injectable({ providedIn: 'root' })
+export class Popup {
+  constructor(private _overlay: Overlay,
+    private _session: SessionService,
+    private _injector: Injector) {
+  }
+  public open<T, V = any, D = any>(component: ComponentType<T> | TemplateRef<T>, element: HTMLElement | ElementRef, options?: {
+    position?: Position,
+    disposeOnBackdrop?: boolean;
+    data?: D,
+    class?: string,
+    backdrop?: boolean,
+    injector?: Injector
+  }): PopupRef<T, V, D> {
+    let positions: ConnectedPosition[];
+    const { backdrop, position, disposeOnBackdrop, data, injector, class: clazz } = options || {};
+    switch (position) {
+      case 'above':
+        positions = [...ABOVE, ...BELOW, ...AFTER, ...BEFORE];
+        break;
+      case 'end':
+        positions = [...AFTER, ...BEFORE, ...BELOW, ...ABOVE];
+        break;
+      case 'start':
+        positions = [...BEFORE, ...AFTER, ...BELOW, ...ABOVE];
+        break;
+      default:
+        positions = [...BELOW, ...BEFORE, ...ABOVE, ...AFTER];
+        break;
+    }
+    const positionStrategy = this._overlay.position().
+      flexibleConnectedTo(element).
+      withGrowAfterOpen(true).
+      withViewportMargin(5).
+      withPositions(positions);
+    const oRef = this._overlay.create({
+      positionStrategy,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: backdrop !== false,
+      disposeOnNavigation: true,
+      direction: this._session.direction,
+      panelClass: ['popup-panel', clazz]
+    });
+    const pRef = new PopupRef<T, V, D>(data);
+    const popupInjector = Injector.create([{ provide: POPUP_DATA, useValue: { component, data } as PopupData },
+    { provide: OverlayRef, useValue: oRef },
+    { provide: PopupRef, useValue: pRef }], injector || this._injector);
+    const portal = new ComponentPortal(PopupComponent, null, popupInjector);
+    oRef.attach(portal);
+    oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE)).
+      subscribe(e => {
+        e.stopPropagation();
+        pRef._closed.next(null);
+      });
+    backdrop !== false && oRef.backdropClick().subscribe(() =>
+      disposeOnBackdrop !== false && pRef._closed.next(null)
+    );
+    pRef._closed.subscribe(() =>
+      oRef.detach()
+    );
+    return pRef;
+  }
+}

package/src/lib/core/popup/tooltip.directive.ts

@@ -0,0 +1,58 @@
+import { Component, Directive, ElementRef, Inject, Input, OnInit, TemplateRef } from '@angular/core';
+import { PopupRef } from './popup-ref';
+import { POPUP_DATA } from './popup.component';
+import { Popup, Position } from './popup.service';
+
+@Component({ template: '' })
+export class TooltipComponent {
+  constructor(
+    @Inject(POPUP_DATA) private _data: string,
+    private _element: ElementRef<HTMLElement>
+  ) {
+    _element.nativeElement.innerHTML = _data;
+  }
+}
+@Directive({ selector: '[bizdocTooltip]' }) export
+  class TooltipDirective implements OnInit {
+  @Input('bizdocTooltip') content: string;
+  @Input('bizdocTooltipTemplate') template: TemplateRef<any>;
+  @Input('bizdocTooltipContext') context: any;
+  @Input('bizdocTooltipPosition') position: Position = 'below';
+  @Input('bizdocTooltipDuration') duration: number = 2000;
+  @Input('bizdocTooltipDisabled') disabled = false;
+  private _ref: PopupRef;
+  private static _active: PopupRef[] = [];
+  constructor(
+    private _element: ElementRef<HTMLElement>,
+    private _popup: Popup,
+  ) {
+
+  }
+  ngOnInit(): void {
+    this._element.nativeElement.addEventListener('mouseenter', this._enter.bind(this))
+    this._element.nativeElement.addEventListener('click', this._click.bind(this))
+  }
+  private _enter() {
+    if (!this.disabled) {
+      while (TooltipDirective._active.length) {
+        TooltipDirective._active[0].close();
+        TooltipDirective._active.splice(0, 1);
+      }
+      this._ref = this._popup.open(this.template || TooltipComponent, this._element, {
+        class: 'tooltip-panel',
+        position: this.position,
+        backdrop: false,
+        data: this.template ? this.context : this.content
+      });
+      TooltipDirective._active.push(this._ref);
+      setTimeout(() => this.close(), this.duration);
+    }
+  }
+  close() {
+    this._ref.close();
+    TooltipDirective._active.remove(this._ref);
+  }
+  private _click() {
+    this._ref && this.close();
+  }
+}

package/src/lib/core/prompt/ask/ask.dialog.html

@@ -0,0 +1,6 @@
+<h2 mat-dialog-title>{{title}}</h2>
+<mat-dialog-content class="mat-body">{{content}}</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="true" [color]="color">{{ok}}</button>
+  <button mat-button mat-dialog-close>{{cancel}}</button>
+</mat-dialog-actions>

package/src/lib/core/prompt/ask/ask.dialog.ts

@@ -0,0 +1,35 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateService } from '../../translate.service';
+import { ThemePalette } from '@angular/material/core';
+
+@Component({
+  selector: 'bizdoc-ask',
+  templateUrl: './ask.dialog.html'
+})
+/** ask component*/
+export class AskDialog {
+  ok: string;
+  cancel: string;
+  title: string;
+  content: string;
+  color: ThemePalette;
+  /** ask ctor */
+  constructor(@Inject(MAT_DIALOG_DATA) data: AskDialogData, translate: TranslateService) {
+    Object.assign(this, {
+      content: data.i18n ? translate.get(data.content) : data.content,
+      title: data.title ? data.i18n ? translate.get(data.title) : data.title : null,
+      cancel: data.cancel ? data.i18n ? translate.get(data.cancel) : data.cancel : translate.get('Cancel'),
+      ok: data.ok ? data.i18n ? translate.get(data.ok) : data.ok : translate.get('OK'),
+      color: data.color || 'primary'
+    });
+  }
+}
+export interface AskDialogData {
+  ok?: string;
+  cancel?: string;
+  title?: string;
+  content: string;
+  color?: ThemePalette;
+  i18n?: boolean;
+}

package/src/lib/core/prompt/mask/mask.component.html

@@ -0,0 +1 @@
+<h1 class="mat-display-2">{{resource|translate}}</h1>

package/src/lib/core/prompt/mask/mask.component.scss

@@ -0,0 +1,14 @@
+:host {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 2em;
+  opacity: .8;
+  display: flex;
+  flex-direction: row;
+  place-content: center center;
+  align-items: center;
+}