@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/core/functions.ts

@@ -0,0 +1,246 @@
+import { MATERIAL_PALETTES } from "./colors";
+
+export declare type MaterialMode = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'A100' | 'A200' | 'A400' | 'A700';
+
+const IMAGE_TYPE = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
+
+export function mapToArray(map: { [key: string]: any }) {
+  return Object.keys(map).map(k => ({ key: k, value: map[k] }));
+}
+
+export function isImage(contentType: string): boolean {
+  return IMAGE_TYPE.indexOf(contentType) > -1;
+}
+
+export function cleanup(params) {
+  Object.keys(params).forEach(k => {
+    const val = params[k];
+    if (val === null || val === undefined || (isArray(val) && !val.length)) delete params[k]
+  });
+  return params;
+}
+
+export function outOfBound(element: HTMLElement) {
+  const bounding = element.getBoundingClientRect();
+  return bounding.top < 0 ||
+    bounding.left < 0 ||
+    bounding.right > document.documentElement.clientWidth ||
+    bounding.bottom > document.documentElement.clientHeight;
+}
+
+const IS_MOBILE = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+export function isMobile() {
+  return IS_MOBILE /*|| document.cookie.indexOf('aria=1') > -1*/;
+} export function isFunction(val): val is Function {
+  return typeof val === 'function';
+}
+export function isBoolean(val): val is boolean {
+  return typeof val === 'boolean';
+}
+export function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+export function isPrimitive(val) {
+  return typeof val !== 'object' && !Array.isArray(val);
+}
+export function isPromise(obj): obj is Promise<any> {
+  return obj instanceof Promise;
+}
+export function isDate(val): val is Date {
+  return val instanceof Date;
+}
+export function isArray(val): val is Array<any> {
+  return Array.isArray(val);
+}
+export function isString(val: any): val is string {
+  return typeof val === 'string' || val instanceof String;
+}
+
+export function getWarn(mode: MaterialMode = 500) {
+  return MATERIAL_PALETTES['red'][mode];
+}
+
+export function playAudio(name: 'notification_simple-01' | 'alert_error-03') {
+  try {
+    const audio = new Audio();
+    audio.src = `/assets/sounds/${name}.ogg`;
+    audio.load();
+    audio.play();
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+/**
+ * 
+ * @param o1
+ * @param o2
+ */
+export function deepAssign(o1, o2) {
+  o2 && Object.keys(o2).forEach(p => {
+    const val2 = o2[p], val1 = o1[p];
+    if (val1 === undefined || val1 === null || isPrimitive(val2)) // val !== 'object' && !Array.isArray(val)
+      o1[p] = val2;
+    else if (Array.isArray(val2)) {
+      if (val2.length && !isPrimitive(val2[0])) {
+        for (let i = 0; i < val2.length; i++) {
+          if (val1[i] !== undefined)
+            deepAssign(val1[i], val2[i]);
+          else
+            val1.push(val2[i]);
+        }
+        (val1 as any[]).splice(val2.length);
+      }
+      else
+        //(val2 as any[]).splice(0, val2.length, ...val);
+        o1[p] = val2;
+    }
+    else //if (isObject(val2))
+      deepAssign(val1, val2);
+  });
+  return o1;
+}
+
+function generateEncryptionMap(): { [key: string]: string | number } {
+  const values = {};
+  for (let i = 65; i < 91; i++) {
+    const d = (i - 65).toString(),
+      c = String.fromCharCode(i);
+    values[d] = c;
+    values[c] = d;
+  }
+  for (let i = 97; i < 123; i++) {
+    const d = (i - 71).toString(),
+      c = String.fromCharCode(i);
+    values[d] = c;
+    values[c] = d;
+  }
+  return values;
+}
+const decode = generateEncryptionMap();
+declare global {
+  interface String {
+    decodeId: () => number;
+  }
+  interface Number {
+    encodeId: () => string;
+  }
+}
+String.prototype.decodeId = function (): number {
+  let v = '';
+  for (let i = 0; i < this.length; i++) {
+    const c = this.charAt(i);
+    v += decode[c];
+  }
+  return parseInt(v);
+};
+Number.prototype.encodeId = function (): string {
+  let v = '',
+    d = this.toString();
+  while (d.length > 0) {
+    let i = 51,
+      c = i.toString();
+    while (!d.startsWith(c)) {
+      --i, c = i.toString();
+    } v += decode[c];
+    d = d.substring(c.length);
+  }
+  return v;
+};
+
+/** global extended array functions */
+(window as any).global = window;
+declare global {
+  interface Array<T> {
+    remove(item: T): T[];
+    last(): T;
+    average(predicate: (i: T) => number): number;
+    distinct<M>(predicate: (i: T) => M): Set<M>;
+    sum(predicate: (i: T) => number): number;
+    max(predicate: (i: T) => number): number;
+  }
+  interface String {
+    formatArgs(...args): string;
+    normalize(): string;
+  }
+}
+String.prototype.normalize = function () {
+  return this.replace(/ /g, '_').replace(/[^\w]/g, '').toLowerCase();
+}
+
+String.prototype.formatArgs = function (...args): string {
+  return this.replace(/{(\d+)}/g, (_, index) => args[index] || '');
+}
+Array.prototype.last = function () {
+  return this[this.length - 1];
+}
+/** remove element from array */
+Array.prototype.remove = function <T>(value: T): T[] {
+  const index = this.indexOf(value);
+  if (index > -1) this.splice(index, 1);
+  return this;
+};
+/** calculate average using element predicate */
+Array.prototype.average = function <T>(predicate?: (i: T) => number): number {
+  let average = 0;
+  this.forEach(i =>
+    average += predicate(i)
+  );
+  return average !== 0 ? average / this.length : 0;
+}
+Array.prototype.distinct = function <T, M>(predicate?: (i: T) => M): Set<M> {
+  const values = new Set<M>();
+  this.forEach(i =>
+    values.add(predicate(i))
+  );
+  return values;
+}
+Array.prototype.max = function <T>(predicate?: (i: T) => number): number {
+  let n = 0;
+  this.forEach(i =>
+    n = Math.max(n, predicate(i))
+  );
+  return n;
+}
+/** sum elements using predicate */
+Array.prototype.sum = function <T>(predicate?: (i: T) => number): number {
+  let n = 0;
+  this.forEach(i =>
+    n += predicate(i)
+  );
+  return n;
+}
+/**
+ * 
+ * @param args
+ */
+export function queryParams(args: any) {
+  const params = {};
+  args &&
+    Object.keys(args).forEach(k => {
+      const val = args[k];
+
+      if (val !== null && val !== undefined) {
+        if (isString(val))
+          params[k] = val;
+        else if (isArray(val) && val.length)
+          params[k] = val;
+        else if (isDate(val))
+          params[k] = val.toJSON();
+        else if (isObject(val)) {
+          if (Object.keys(val).length) params[k] = queryParams(val);
+        }
+        else
+          params[k] = val;
+      }
+    });
+  return params;
+}
+function getParameterByName(name, url = window.location.href) {
+  name = name.replace(/[\[\]]/g, '\\$&');
+  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+    results = regex.exec(url);
+  if (!results) return null;
+  if (!results[2]) return '';
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}

package/src/lib/core/guide/_guide-theme.scss

@@ -0,0 +1,197 @@
+@mixin guide-theme($theme) {
+  $accent: mat.get-color-from-palette($theme, accent);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $background: mat.get-color-from-palette($theme, background);
+
+  $guide-border-color:  mat.get-color-from-palette($accent, 300);
+  $guide-tooltip-size: 9px;
+  $guide-margin: 12px;
+  $guide-padding: 8px;
+  $guide-background:  mat.get-color-from-palette($background, card);
+
+  .guide-panel {
+    .container {
+      display: flex;
+
+      .content {
+        padding: 8px;
+        display: block;
+        min-width: 250px;
+        color:  mat.get-color-from-palette($foreground, text);
+        background: $guide-background;
+        border-radius: 5px;
+        border: 3px solid $guide-border-color;
+      }
+
+      .tooltip-container {
+        display: none;
+
+        .tooltip {
+          display: block;
+          position: relative;
+          transform: translate(-50%,50%) rotate(45deg);
+          width: $guide-tooltip-size;
+          height: $guide-tooltip-size;
+          background: $guide-background;
+          border: 3px solid $guide-border-color;
+          border-radius: 1px;
+
+          &:after {
+            content: '\00a0';
+            position: absolute;
+            background: $guide-background;
+            width: 15px;
+            height: 15px;
+          }
+        }
+      }
+    }
+
+    &.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 {
+        margin-bottom: 17px;
+      }
+
+      &.end .tooltip {
+        margin-bottom: 20px;
+      }
+    }
+
+    &.above, &.below {
+      .container {
+        margin-left: $guide-padding;
+        margin-right: $guide-padding;
+      }
+
+      &.start .tooltip {
+        margin-left: 20px;
+      }
+
+      &.end .tooltip {
+        margin-right: 4px;
+      }
+    }
+
+    &.above .tooltip, &.after .tooltip {
+      position: absolute !important;
+    }
+
+    &.before {
+      .container {
+        -ms-flex-direction: row;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+      }
+
+      .tooltip:after {
+        left: -5px;
+        top: 0;
+      }
+    }
+
+    &.after {
+      .container {
+        margin-left: $guide-margin;
+        -ms-flex-direction: row-reverse;
+        -webkit-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+      }
+
+      .tooltip:after {
+        top: -5px;
+        left: 0;
+      }
+    }
+
+    &.above {
+      .container {
+        margin-top: $guide-padding;
+        -ms-flex-direction: column;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .tooltip {
+        margin-top: -17px;
+
+        &:after {
+          left: -5px;
+          top: -5px;
+        }
+      }
+    }
+
+    &.below {
+      .container {
+        margin-bottom: $guide-padding;
+        -ms-flex-direction: column-reverse;
+        -webkit-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+      }
+
+      .tooltip:after {
+      }
+    }
+  }
+
+  [dir=rtl] .guide-panel {
+    &.above.start .tooltip, &.below.start .tooltip {
+      margin-right: 8px;
+      margin-left: unset;
+    }
+
+    &.above.end .tooltip, &.below.end .tooltip {
+      margin-left: 20px;
+    }
+
+    &.below .tooltip:after {
+      top: 0;
+      right: -5px;
+    }
+
+    &.before .tooltip {
+      margin-right: -17px;
+
+      &:after {
+        top: 0;
+        left: -5px;
+      }
+    }
+
+    &.above .tooltip, &.after .tooltip {
+      position: relative !important;
+    }
+
+    &.after {
+      .container {
+        margin-left: unset;
+        margin-right: $guide-margin;
+      }
+
+      .tooltip:after {
+        left: -5px;
+        top: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+<div class="container" [style.display]="step ? '': 'none'" cdkTrapFocus>
+  <div fxLayout="column" class="content">
+    <div fxLayout="row">
+      <h2 *ngIf="step?.title" class="mat-h2">{{step?.title}}</h2>
+      <span class="divider"></span>
+      <button mat-icon-button (click)="close()" *ngIf="index < count - 1"><mat-icon>close</mat-icon></button>
+    </div>
+    <p class="mat-body" [innerHTML]="step?.content | sanitizeHtml">
+    </p>
+    <div fxLayout="row">
+      <span class="divider"></span>
+      <button mat-icon-button (click)="prev()" [disabled]="index < 1 || working"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+      <button mat-icon-button (click)="next()" [disabled]="index >= count - 1 || working" cdkFocusInitial><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>
+      <button mat-button (click)="close()" *ngIf="index >= count - 1">{{'GuideFinish'|translate}}</button>
+    </div>
+  </div>
+  <div class="tooltip-container">
+    <div class="tooltip"></div>
+  </div>
+</div>

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

@@ -0,0 +1,222 @@
+import { Inject, Component, OnInit, ElementRef, InjectionToken, HostListener } from '@angular/core';
+import { Overlay, OverlayRef, PositionStrategy, ConnectedPosition } from "@angular/cdk/overlay";
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { Directionality } from '@angular/cdk/bidi';
+import { ESCAPE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { GuideStep, Guide } from '../models';
+import { outOfBound } from '../functions';
+import { Router } from '@angular/router';
+import { SessionService } from '../session.service';
+
+export const TOUR_TOKEN = new InjectionToken<Guide>('guide');
+
+const BELOW: ConnectedPosition[] = [{
+  originX: 'start',
+  originY: 'bottom',
+  overlayX: 'start',
+  overlayY: 'top',
+  panelClass: ['below', 'start']
+}, {
+  originX: 'center',
+  originY: 'bottom',
+  overlayX: 'center',
+  overlayY: 'top',
+  panelClass: ['below', 'center']
+}, {
+  originX: 'end',
+  originY: 'bottom',
+  overlayX: 'end',
+  overlayY: 'top',
+  panelClass: ['below', 'end']
+}],
+  ABOVE: ConnectedPosition[] = [{
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    panelClass: ['above', 'start']
+  },
+  {
+    originX: 'center',
+    originY: 'top',
+    overlayX: 'center',
+    overlayY: 'bottom',
+    panelClass: ['above', 'center']
+  },
+  {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    panelClass: ['above', 'end']
+  }],
+  AFTER: ConnectedPosition[] = [{
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'top',
+    panelClass: ['after', 'start']
+  },
+  {
+    originX: 'end',
+    originY: 'center',
+    overlayX: 'start',
+    overlayY: 'center',
+    panelClass: ['after', 'center']
+  },
+  {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    panelClass: ['after', 'end']
+  }],
+  BEFORE: ConnectedPosition[] = [{
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    panelClass: ['before', 'start']
+  }, {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'center',
+    panelClass: ['before', 'center']
+  }, {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    panelClass: ['before', 'end']
+  }];
+
+@Component({
+  templateUrl: './guide.component.html',
+  animations: [trigger('body', [
+    state('here', style({ width: '*', height: '*' })),
+    transition('*<=>*', animate('250ms', style({})))])]
+})
+export class GuideComponent implements OnInit {
+  step: GuideStep;
+  index = -1;
+  readonly count: number = this._data.steps.length;
+  working = true;
+  constructor(
+    @Inject(TOUR_TOKEN)
+    private _data: Guide,
+    private _session: SessionService,
+    private _overlay: Overlay,
+    private _ngRouter: Router,
+    private _overlayRef: OverlayRef) {
+  }
+  ngOnInit(): void {
+    if (this._data.name) {
+      const lastindex = localStorage.getItem(this._data.name + '_guide_step');
+      if (lastindex) {
+        this.index = Number.parseInt(lastindex);
+      }
+    }
+    this._moveBy(1);
+  }
+  /**
+   * 
+   * @param steps
+   */
+  private _moveBy(steps: 1 | -1) {
+    const index = this.index + steps;
+    if (index < 0 || index > this.count - 1) {
+      localStorage.removeItem(this._data.name + '_guide_step');
+      return;
+    }
+    this._data.name && localStorage.setItem(this._data.name + '_guide_step', this.index.toString());
+    this.working = true;
+    const step = this._data.steps[index];
+    const { selector, position, navigate, simulate } = step, promisses: Promise<any>[] = [];
+    if (navigate) {
+      const promise = this._ngRouter.navigateByUrl(navigate);
+      promisses.push(promise);
+    }
+    let positionStrategy: PositionStrategy;
+    if (selector) {
+      const element = document.querySelector(selector) as HTMLElement;
+      if (!element) {
+        console.warn(`Guide ${this._data.name} selector '${selector}' not found. skipping.`);
+        this._moveBy(steps);
+        return;
+      }
+      let positions: ConnectedPosition[];
+      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;
+        case 'Below':
+          positions = [...BELOW, ...BEFORE, ...ABOVE, ...AFTER];
+          break;
+        default:
+          positions = [...BEFORE, ...BELOW, ...ABOVE, ...AFTER];
+      }
+      positionStrategy = this._overlay.position().
+        flexibleConnectedTo(new ElementRef(element)).
+        withPositions(positions).
+        withGrowAfterOpen();
+      if (outOfBound(element)) {
+        promisses.push(new Promise<any>(resolve => {
+          const task = setInterval(() => {
+            if (!outOfBound(element)) {
+              clearInterval(task);
+              resolve(null);
+            }
+          }, 150);
+        }));
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+      simulate &&
+        promisses.push(new Promise(resolve => {
+          element.click();
+          resolve(null);
+        }));
+    }
+    else positionStrategy = this._overlay.position().global().centerVertically().centerHorizontally();
+
+    const complete = () => {
+      this.index = index;
+      this.step = step;
+      this.working = false;
+      this._overlayRef.updatePositionStrategy(positionStrategy);
+      this._overlayRef.updatePosition();
+    };
+    promisses.length ? Promise.all(promisses).then(() => complete()) : complete();
+  }
+  @HostListener('window:keydown', ['$event'])
+  keydown(evt: KeyboardEvent) {
+    if (!this.working)
+      switch (evt.keyCode) {
+        case LEFT_ARROW:
+          this._moveBy(this._session.direction === 'ltr' ? -1 : 1);
+          break;
+        case RIGHT_ARROW:
+          this._moveBy(this._session.direction === 'ltr' ? 1 : -1);
+          break;
+        case ESCAPE:
+          this.close();
+          evt.stopPropagation();
+          break;
+      }
+  }
+  next() {
+    this._moveBy(1);
+  }
+  prev() {
+    this._moveBy(-1);
+  }
+  close() {
+    this._overlayRef.detach();
+  }
+}