@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/core/decorators.ts

@@ -0,0 +1,56 @@
+import { Type, NgModule, Component } from "@angular/core";
+
+export const REGISTRY: { [name: string]: any } = {};
+
+/**
+ * @link BizDocComponentFactoryResolver
+ * @param args
+ */
+export function BizDoc(args: ComponentType): (cls: any) => any {
+  function Decorator(compType: any) {
+    compType['__bizdoc'] = args.selector;
+  }
+  return Decorator;
+}
+
+export interface ComponentType {
+  selector: string;
+}
+
+//function getComp(selector) {
+//  const ngModuleDecorator = decoratorOfType(BizDocModule, NgModule);
+//  const componentType = ngModuleDecorator.declarations.find((declaration: Type<any>) => {
+//    // get the @Component decorator
+//    const declarationDecorator = decoratorOfType(declaration, Component);
+
+//    // find a declaration with the @Component decorator (not a @Directive) with the requested selector
+//    return declarationDecorator != null && declarationDecorator.selector === selector;
+//  });
+//}
+/**
+ * gets a decorator of the requested type off of the given decorated type
+ * @param decoratedType to get decorator annotations off of
+ * @param decoratorType to search for out of all the decorators on decoratedType
+ * @returns decorator from the decoratedType of the decoratorType
+ */
+//export function decoratorOfType<T>(decoratedType: Type<any>, decoratorType: Type<T>): T {
+//  // get all decorators off of the provided type
+//  return Reflect.getOwnPropertyDescriptor(decoratedType, '__annotations__').value.find((annotation: any) =>
+//    // get the decorator that matches the requested type
+//    annotation instanceof decoratorType
+//  );
+//}
+
+//function components(module) {
+//  const ngModuleDecorator = decoratorOfType(module, NgModule);
+//  const map = {};
+//  ngModuleDecorator.declarations.forEach((declaration: Type<any>) => {
+//    // get the @Component decorator
+//    const declarationDecorator = decoratorOfType(declaration, Component);
+
+//    // find a declaration with the @Component decorator (not a @Directive) with the requested selector
+//    if (declarationDecorator != null)
+//      map[declarationDecorator.selector] = declaration;
+//  });
+//  return map;
+//}

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

@@ -0,0 +1,55 @@
+import { SessionService } from './session.service';
+import { FirebaseSettings } from '../core/configuration';
+import * as firebase from 'firebase/app';
+import { deleteToken, getMessaging, getToken, Messaging, onMessage } from "firebase/messaging";
+
+const DEVICE_TYPE = 'Chrome', ACTIVATION_DELAY = 3000;
+
+export enum FirebaseState {
+  Activated,
+}
+
+export class FirebaseService {
+  private _messaging: Messaging;
+  private _token: string;
+  private _state: FirebaseState;
+  constructor(private _config: FirebaseSettings, private _session: SessionService) {
+    if (_config && navigator.serviceWorker) {
+      const { apiKey, projectId, senderId, appId } = _config;
+      if (apiKey) {
+        const app = firebase.initializeApp({
+          apiKey,
+          projectId,
+          appId,
+          messagingSenderId: senderId
+        });
+        this._messaging = getMessaging();
+      }
+    }
+  }
+  get state(): FirebaseState {
+    return this._state;
+  }
+  public activate(): void {
+    this._config && this._config.apiKey &&
+      setTimeout(() => this._activate(), this._config.grace || ACTIVATION_DELAY);
+  }
+  public async close(): Promise<any> {
+    await deleteToken(this._messaging);
+    return this._session.unregisterDevice(DEVICE_TYPE, this._token).subscribe();
+  }
+  private _activate() {
+    const { vapidKey } = this._config;
+    navigator.serviceWorker.register('./js/firebase-messaging-sw.js')
+      .then((serviceWorkerRegistration) => {
+        //requestPermission();
+        getToken(this._messaging, { vapidKey, serviceWorkerRegistration }).
+          then(token => {
+            this._token = token;
+            this._session.registerDevice(DEVICE_TYPE, token).subscribe(() =>
+              this._state = FirebaseState.Activated);
+          });
+        //onTokenRefresh(token => this._session.registerDevice(DEVICE_TYPE, token).subscribe());
+      });
+  }
+}

package/src/lib/core/functions.ts

@@ -0,0 +1,229 @@
+import { MATERIAL_PALETTES } from "./colors";
+
+export declare type MaterialMode = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'A100' | 'A200' | 'A400' | 'A700';
+
+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 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
+ */
+Object.deepAssign = function (o1, o2) {
+  o2 && Object.keys(o2).forEach(p => {
+    const val = o2[p], val2 = o1[p];
+    if (val2 === undefined || val2 === null || isPrimitive(val))
+      o1[p] = val;
+    else if (isArray(val)) {
+      if (val.length && !isPrimitive(val[0])) {
+        for (let i = 0; i < val.length; i++) {
+          if (val2[i] !== undefined)
+            Object.deepAssign(val2[i], val[i]);
+          else
+            val2.push(val[i]);
+        }
+        (val2 as any[]).splice(val.length);
+      }
+      else
+        //(val2 as any[]).splice(0, val2.length, ...val);
+        o1[p] = val;
+    }
+    else if (isObject(val))
+      Object.deepAssign(val2, val);
+  });
+  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;
+    sum(predicate: (i: T) => number): number;
+    max(predicate: (i: T) => number): number;
+  }
+  interface String {
+    formatArgs(...args): string;
+    normalize(): string;
+  }
+  interface Object {
+    deepAssign(val1, val2): any;
+  }
+}
+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.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: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  $guide-border-color: mat-color($accent, 300);
+  $guide-tooltip-size: 9px;
+  $guide-margin: 12px;
+  $guide-padding: 8px;
+  $guide-background: mat-color($background, card);
+
+  .guide-panel {
+    .container {
+      display: flex;
+
+      .content {
+        padding: 8px;
+        display: block;
+        min-width: 250px;
+        color: mat-color($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 === 0 || 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>