@sumaris-net/ngx-components 2.6.4-alpha5 → 2.6.4-alpha6

package/src/app/shared/graph/colors.utils.ts

@@ -1,74 +0,0 @@
-export function rgbToHex(r: number, g: number, b: number): string {
-  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-
-export function rgbArrayToHex(rgb: number[]): string {
-  return '#' + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]);
-}
-
-export function hexToRgbArray(hex: string): number[] {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? [
-    parseInt(result[1], 16),
-    parseInt(result[2], 16),
-    parseInt(result[3], 16)
-  ] : null;
-}
-
-export function hexToRgb(hex: string): {r: number; g: number; b: number} {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null;
-}
-
-function componentToHex(c: number): string {
-  const hex = c.toString(16);
-  return hex.length === 1 ? ('0' + hex) : hex;
-}
-
-// See mix in file ionic.functions.color.scss
-export function mixHex(color1: string, color2: string, weight?: number) {
-
-  weight = weight ? (weight / 100) : 0.5;
-
-  const rgb1 = hexToRgbArray(color1);
-  if (!rgb1) throw Error('Invalid hex color:' + color1);
-
-  const rgb2 = hexToRgbArray(color2);
-  if (!rgb2) throw Error('Invalid hex color:' + color2);
-
-  const rgbAverage = rgb1.map((v, index) => Math.round((v * weight + rgb2[index] * (1 - weight))) );
-  return rgbArrayToHex(rgbAverage);
-}
-
-// 12% darker version of the base color (mix with black)
-export function getColorShade(color: string) {
-  return mixHex('#000000', color, 12);
-}
-
-// 10% lighter version of the base color (mix with white)
-export function getColorTint(color: string) {
-  return mixHex('#ffffff', color, 10);
-}
-
-/**
- *
- * @param color
- * @param bw if true, will use black or white color, instead of the exact inverse
- */
-export function getColorContrast(color: string, bw?: boolean) {
-  const rgb = hexToRgbArray(color);
-  if (!rgb) throw Error('Invalid hex color:' + color);
-
-  if (bw === true) {
-    // http://stackoverflow.com/a/3943023/112731
-    return (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) > 186
-      ? '#000000'
-      : '#FFFFFF';
-  }
-
-  return rgbArrayToHex(rgb.map(v => 255 - v));
-}

package/src/app/shared/graph/graph-colors.ts

@@ -1,295 +0,0 @@
-import {PredefinedColors} from '@ionic/core';
-import {isNil, isNotNil} from '../functions';
-import {hexToRgb, hexToRgbArray, rgbArrayToHex} from './colors.utils';
-
-export declare type ColorName = PredefinedColors |
-  'white'
-  | 'red'
-  | 'green'
-  | 'blue';
-
-
-/**
- * Define here theme colors
- */
-const rgbArrayMap = {
-  white: [255, 255, 255],
-  primary: [20, 67, 145], // ok
-  secondary: [117, 196, 253], // ok
-  tertiary: [91, 94, 244], // ok
-  danger: [245, 61, 61], // ok
-  light: [244, 245, 248], // ok
-  medium: [152, 154, 162], // ok
-  dark: [34, 36, 40], // ok
-  red: [255, 0, 0],
-  green: [0, 255, 0],
-  blue: [0, 0, 255]
-};
-
-// Fill a map of Color objects
-const colorsMap: { [key: string]: Color } = {};
-
-
-/**
- * Useful class for color conversion
- */
-// @dynamic
-export class Color {
-
-  // Helper method, to retrieve a color
-  static get(name: ColorName): Color {
-    return colorsMap[name] as Color;
-  }
-
-  static parseRgba(rgba: string): Color|null{
-      if (!rgba || (!rgba.startsWith('rgb(') && !rgba.startsWith('rgba('))) return null;
-
-      // Parse parts
-      const parts = rgba
-        .replace('rgb(', '')
-        .replace('rgba(', '')
-        .replace(')', '')
-        .split(',');
-
-      if (parts.length !== 3 && parts.length !== 4) return null;
-
-      return new Color([+parts[0], +parts[1], +parts[2]],
-        parts.length === 4 && +parts[3] || 1,
-        'custom');
-  }
-
-  static transparent = function() {
-    return new Color([0,0,0], 0, 'translucent');
-  };
-
-  constructor(
-    private _rgbArray: number[],
-    private _opacity?: number,
-    private _name: string = 'custom'
-  ) {
-  }
-  get name(): string {
-    return this._name;
-  }
-  get opacity(): number{
-    return isNotNil(this._opacity) ? this._opacity : 1;
-  }
-  get rgb(): number[] {
-    return this._rgbArray;
-  }
-
-  get r(): number {
-    return this._rgbArray[0];
-  }
-
-  get g(): number {
-    return this._rgbArray[1];
-  }
-
-  get b(): number {
-    return this._rgbArray[2];
-  }
-
-  rgba(opacity?: number): string {
-    opacity = isNotNil(opacity) ? opacity : this._opacity;
-    if (isNil(opacity) || opacity < 0 || opacity > 1) {
-      return 'rgb(' + this._rgbArray.join(',') + ')';
-    }
-    return 'rgba(' + this._rgbArray.join(',') + ',' + opacity + ')';
-  }
-
-}
-
-export declare interface ColorGradientOptions {
-  startColor?: number[];
-  mainColor?: number[];
-  mainColorIndex?: number;
-  endColor?: number[];
-}
-
-export declare interface ColorScaleOptions extends ColorGradientOptions {
-  opacity?: number;
-  min?: number;
-  max?: number;
-  upperMax?: boolean;
-}
-
-export declare interface ColorScaleLegendItem {
-  label: string|number[];
-  color: Color;
-}
-
-export declare interface ColorScaleLegend {
-  items: ColorScaleLegendItem[];
-}
-
-/**
- * Helper class for colors scale
- */
-// @dynamic
-export class ColorScale {
-
-  static custom = (count: number, options?: ColorScaleOptions) => {
-    options = options || {};
-    return new ColorScale(
-      linearColorGradientWithIntermediate(count, {
-        startColor: options.startColor || undefined,
-        mainColor: options.mainColor || undefined,
-        mainColorIndex: isNotNil(options.mainColorIndex) ? options.mainColorIndex : undefined,
-        endColor: options.endColor || undefined
-      }),
-      options
-    );
-  };
-
-  static default() {
-    return ColorScale.custom(25);
-  }
-
-  /**
-   * Create a array with the given color
-   **/
-  static fix(length?: number, colorName?: ColorName): any[] {
-    return Array.apply(null, Array(length || 25))
-      .map(String.prototype.valueOf, Color.get(colorName || 'primary').rgba(0.5));
-  }
-
-  private _min: number;
-  private _max: number;
-  private _rangeSize: number;
-  private _legendItems: ColorScaleLegendItem[];
-
-  get min(): number {
-    return this._min;
-  }
-  get max(): number {
-    return this._max;
-  }
-
-  constructor(colorArray: number[][], options?: ColorScaleOptions) {
-    options = options || {};
-    // reserved last colors for value > max
-    const nbIntervalBeforeUpper = !options.upperMax ? colorArray.length : (colorArray.length - 1);
-    this._min = options.min || 0;
-    this._max = options.max || nbIntervalBeforeUpper;
-    this._rangeSize = Math.round((this._max - this._min) / nbIntervalBeforeUpper);
-    this._legendItems = this.computeLegendItems(colorArray);
-  }
-
-  get legend(): ColorScaleLegend {
-    return {
-      items: this._legendItems
-    };
-  }
-
-  getValueColor(value: number): Color {
-    return this.getLegendForValue(value).color;
-  }
-
-  getLegendForValue(value: number): ColorScaleLegendItem {
-    if (value <= this._min) return this._legendItems[0];
-    if (value >= this._max) return this._legendItems[this._legendItems.length - 1];
-    const index = Math.floor(value * (this._legendItems.length - 1) / this._max);
-    return this._legendItems[index];
-  }
-
-  getLegendAtIndex(index: number): ColorScaleLegendItem {
-    return this._legendItems[index];
-  }
-
-  protected computeLegendItems(colorArray: number[][]): ColorScaleLegendItem[] {
-    return colorArray.map((color, index) => {
-      const start = index * this._rangeSize;
-      const end = start + this._rangeSize;
-      return {
-        color: new Color(color),
-        label: (end < this._max) ? `${start.toLocaleString()} - ${end.toLocaleString()}` : ` >= ${start}`
-      };
-    });
-  }
-}
-
-
-// Fill colorsMap
-Object.getOwnPropertyNames(rgbArrayMap)
-  .forEach((key) => {
-    colorsMap[key] = new Color(rgbArrayMap[key], 1, key);
-  });
-
-
-/**
- * Internal function, that create a colors scale, using iteration
- *
- * @param count
- * @param opacity
- * @param startColor
- * @param startState
- * @returns
- */
-function linearColorGradientWithIntermediate(count: number,
-                                             options?: ColorGradientOptions): number[][] {
-  options = options || {};
-
-  // From [0,1]
-  options.startColor = options.startColor || [255, 255, 190]; // default start = creme
-  options.mainColorIndex = options.mainColorIndex && options.mainColorIndex < count - 1 ? options.mainColorIndex : count - 1;
-  options.endColor = options.endColor || [255, 0, 0]; // default main = red
-
-  if (!options.mainColor) {
-    return linearColorGradient(count, {
-      startColor: options.startColor,
-      endColor: options.endColor
-    });
-  }
-
-  else {
-    // Step 1: startColor -> mainColor
-    const result = linearColorGradient(options.mainColorIndex + 1, {
-      startColor: options.startColor,
-      endColor: options.mainColor
-    });
-
-    // Step 2: mainColor -> endColor
-    if (options.mainColorIndex < count - 1) {
-      return result.concat(
-        linearColorGradient(count - options.mainColorIndex, {
-          startColor: options.mainColor,
-          endColor: options.endColor
-        }));
-    }
-    else {
-      return result;
-    }
-  }
-}
-
-function linearColorGradient(count: number,
-                             options?: ColorGradientOptions): any[] {
-
-  options = options || {};
-
-  // From [0,1]
-  options.startColor = options.startColor || [255, 255, 255]; // default start = white
-  options.endColor = options.endColor || [255, 0, 0]; // default end = red
-
-  const result: number[][] = [];
-  const color = options.startColor.slice(); // copy the start color
-  const delta = [
-    Math.round((options.endColor[0] - options.startColor[0]) / count),
-    Math.round((options.endColor[1] - options.startColor[1]) / count),
-    Math.round((options.endColor[2] - options.startColor[2]) / count)
-  ];
-
-  for (let i = 0; i < count - 1; i++) {
-    for (let j = 0; j < 3; j++) {
-      color[j] += delta[j];
-    }
-    result.push(color.slice());
-  }
-
-  // Force last color = end color
-  result.push(options.endColor.slice());
-
-  // Output as array
-  return result;
-}

package/src/app/shared/guard/component-dirty.guard.ts

@@ -1,70 +0,0 @@
-import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree} from '@angular/router';
-import {TranslateService} from '@ngx-translate/core';
-import {AlertController} from '@ionic/angular';
-import {Alerts} from '../alerts';
-
-export interface CanLeave {
-  dirty: boolean;
-  valid: boolean;
-  save(event?: Event, options?: any): Promise<boolean>;
-  cancel(event?: Event): Promise<void>;
-}
-
-@Injectable()
-export class ComponentDirtyGuard implements CanDeactivate<CanLeave> {
-
-  private debug = false;
-
-  constructor(
-    protected translate: TranslateService,
-    protected alertCtrl: AlertController,
-  ) {
-  }
-
-  async canDeactivate(component: CanLeave, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot):
-    Promise<boolean | UrlTree> {
-
-    const dirty = component?.dirty;
-    const valid = component?.valid;
-    let can = {
-      confirmed: !dirty,
-      save: false,
-    };
-
-    if (this.debug) {
-      console.debug(`[dirty-guard] canDeactivate component dirty: ${dirty}, valid: ${valid}`);
-    }
-
-    if (dirty) {
-      // Ask confirmation
-      can = await Alerts.askSaveBeforeAction(this.alertCtrl, this.translate, {valid});
-    }
-
-    if (this.debug) console.debug(`[dirty-guard] confirm: ${can.confirmed}`);
-
-    if (can.confirmed) {
-      if (can.save) {
-        if (this.debug) console.debug(`[dirty-guard] do save`);
-        const saved = await component.save();
-        if (!saved) {
-          if (this.debug) console.debug(`[dirty-guard] save failed, cancel deactivate`);
-          return false;
-        }
-      } else {
-        if (this.debug) console.debug(`[dirty-guard] do cancel`);
-        if (dirty)
-          component.cancel();
-      }
-
-      // Allow deactivate
-      return true;
-    }
-
-    // Cancel deactivate
-    return false;
-
-  }
-
-
-}

package/src/app/shared/help/help.modal.html

@@ -1,42 +0,0 @@
-<app-modal-toolbar color="light"
-                   [title]="title|translate"
-                   (cancel)="close($event)"
-                   [showSpinner]="loading">
-</app-modal-toolbar>
-
-<ion-content class="ion-padding">
-
-  <!-- error -->
-  <ion-item *ngIf="error && showError" lines="none">
-    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-    <ion-label color="danger" class="error" [innerHTML]="error|translate"></ion-label>
-  </ion-item>
-
-  <markdown *ngIf="markdownContent; else useDocUrl"
-            [data]="markdownContent"
-            (ready)="markAsLoaded()"
-            emoji>
-  </markdown>
-
-  <ng-template #useDocUrl>
-    <markdown *ngIf="markdownUrl"
-              [src]="markdownUrl"
-              (load)="markAsLoaded()"
-              (error)="onLoadError($event)"
-              emoji></markdown>
-  </ng-template>
-
-</ion-content>
-
-<ion-footer hidden-xs hidden-sm hidden-mobile>
-  <ion-toolbar>
-    <ion-row class="ion-no-padding" nowrap>
-      <ion-col></ion-col>
-      <ion-col size="auto">
-        <ion-button fill="solid" color="tertiary" (click)="close()">{{'COMMON.BTN_CLOSE'|translate}}</ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-toolbar>
-</ion-footer>
-
-

package/src/app/shared/help/help.modal.ts

@@ -1,61 +0,0 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, OnInit} from '@angular/core';
-import {ModalController} from '@ionic/angular';
-import {PlatformService} from '../../core/services/platform.service';
-import {LocalSettingsService} from '../../core/services/local-settings.service';
-import {TranslateService} from '@ngx-translate/core';
-
-export interface AppHelpModalOptions {
-  title?: string,
-  markdownContent?: string,
-  markdownUrl?: string
-  showError?: boolean;
-}
-
-@Component({
-  selector: 'app-help-modal',
-  templateUrl: './help.modal.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AppHelpModal implements AppHelpModalOptions {
-
-  readonly debug: boolean;
-  loading = true;
-  error: string = undefined;
-
-  @Input() title: string;
-  @Input() showError = true;
-  @Input() markdownContent: string;
-  @Input() markdownUrl: string;
-
-  constructor(
-      protected injector: Injector,
-      protected viewCtrl: ModalController,
-      protected platform: PlatformService,
-      protected settings: LocalSettingsService,
-      protected translate: TranslateService,
-      protected cd: ChangeDetectorRef
-  ) {
-    // TODO: for DEV only
-    //this.debug = !environment.production;
-  }
-
-  close(event?: Event) {
-      return this.viewCtrl.dismiss();
-  }
-
-  markAsLoaded() {
-    this.loading = false;
-    this.error = null;
-    this.cd.markForCheck();
-  }
-
-  onLoadError(error?: string) {
-    console.error(error);
-
-    this.error = error;
-    this.loading = false;
-    this.cd.markForCheck();
-  }
-
-
-}

package/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.html

@@ -1,11 +0,0 @@
-<table>
-  <tbody>
-  <tr *ngFor="let keys of hotkeys">
-    <td>{{ keys[1] | translate }}</td>
-
-    <td class="text-right">
-      <kbd>{{ keys[0] }}</kbd>
-    </td>
-  </tr>
-  </tbody>
-</table>

package/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.scss

@@ -1,39 +0,0 @@
-:host {
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    margin-bottom: 1rem;
-    color: #212529;
-  }
-
-  th {
-    font-weight: 500;
-    text-align: left;
-    vertical-align: bottom;
-    padding: .75rem;
-    border-top: 1px solid #dee2e6;
-    border-bottom: 2px solid #dee2e6;
-  }
-
-  td {
-    padding: .75rem;
-    vertical-align: top;
-    border-top: 1px solid #dee2e6;
-    padding-left: 0;
-  }
-
-  kbd {
-    margin-right: 6px;
-    background-color: #fafbfc;
-    border: 1px solid #d1d5da;
-    border-bottom-color: #c6cbd1;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #c6cbd1;
-    color: #444d56;
-    display: inline-block;
-    font-size: 12px;
-    line-height: 10px;
-    padding: 3px 5px;
-    vertical-align: middle;
-  }
-}

package/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
-
-@Component({
-  templateUrl: './hotkeys-dialog.component.html',
-  styleUrls: ['./hotkeys-dialog.component.scss']
-})
-export class HotkeysDialogComponent implements OnInit {
-  hotkeys = Array.from(this.data);
-
-  constructor(@Inject(MAT_DIALOG_DATA) protected data) { }
-
-  ngOnInit() {
-  }
-
-}

package/src/app/shared/hotkeys/hotkeys.service.ts

@@ -1,89 +0,0 @@
-import { Inject, Injectable } from '@angular/core';
-import { EventManager } from '@angular/platform-browser';
-import { Observable } from 'rxjs';
-import { DOCUMENT } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
-import { HotkeysDialogComponent } from './dialog/hotkeys-dialog.component';
-import { isNotNilOrBlank } from '../functions';
-import { ModalController, PopoverController } from '@ionic/angular';
-
-interface Options {
-  element: any;
-  elementName: string;
-  description: string | undefined;
-  keys: string;
-  preventDefault: boolean;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class Hotkeys {
-
-  private _debug = false;
-  private _hotkeys = new Map();
-
-  private _defaults: Partial<Options> = {
-    element: this.document,
-    preventDefault: true
-  };
-
-  constructor(private eventManager: EventManager,
-              private dialog: MatDialog,
-              @Inject(DOCUMENT) private document: any,
-              private modalController: ModalController,
-              private popoverController: PopoverController) {
-    if (this._debug) console.debug('[hotkeys] Starting hotkeys service... Press Shift+? to get help modal.');
-
-    this.addShortcut({keys: 'shift.?'})
-      .subscribe(() => this.openHelpModal());
-
-    // For DEV only
-    //this._debug = !environment.production;
-  }
-
-  addShortcut(options: Partial<Options>): Observable<Event> {
-
-    const merged = {...this._defaults, ...options};
-    const event = `keydown.${merged.keys}`;
-
-    if (isNotNilOrBlank(merged.description)) {
-      if (this._debug) console.debug(`[hotkeys] Add shortcut {${options.keys}}: ${merged.description}`);
-      this._hotkeys.set(merged.keys, merged.description);
-    } else {
-      if (this._debug) console.debug(`[hotkeys] Add shortcut {${options.keys}}`);
-    }
-
-    return new Observable(observer => {
-      const handler = async (e: Event) => {
-
-        // Get top component from ModalController
-        const top = await this.modalController.getTop() || await this.popoverController.getTop();
-        // If modal present, check its component name against hotkey element name (fix #181)
-        if (top && top.component['name'] !== merged.elementName) {
-          e.preventDefault();
-          return;
-        }
-        if (e instanceof KeyboardEvent && e.repeat) return; // skip when repeated
-        if (merged.preventDefault) e.preventDefault();
-        if (this._debug) console.debug(`[hotkeys] Shortcut {${options.keys}} detected...`);
-        observer.next(e);
-      };
-
-      const dispose = this.eventManager.addEventListener(merged.element, event, handler);
-
-      return () => {
-        dispose();
-        this._hotkeys.delete(merged.keys);
-      };
-    });
-  }
-
-  openHelpModal() {
-    this.dialog.open(HotkeysDialogComponent, {
-      width: '500px',
-      data: this._hotkeys
-    });
-  }
-
-}