@sumaris-net/ngx-components 18.12.0 → 18.12.2

package/src/app/shared/geolocation/geolocation.utils.ts

@@ -1,105 +0,0 @@
-import { Geolocation, Position } from '@capacitor/geolocation';
-import { PlatformService } from '../../core/services/platform.service';
-import { Platform } from '@ionic/angular';
-import { isNil } from '../functions';
-
-export class IPosition {
-  latitude: number;
-  longitude: number;
-}
-
-export abstract class GeolocationUtils {
-  static isNotNilAndValid(position: IPosition, opts?: { debug?: boolean }) {
-    if (!position || isNil(position.latitude) || isNil(position.longitude)) return false;
-
-    // Invalid lat/lon
-    if (position.latitude < -90 || position.latitude > 90 || position.longitude < -180 || position.longitude > 180) {
-      // /!\ Log in console, because should never occur
-      if (opts?.debug) console.warn('Invalid lat/long position:  ', position);
-      return false;
-    }
-
-    // OK: valid
-    return true;
-  }
-
-  static isNilOrInvalid(position: IPosition, opts?: { debug?: boolean }) {
-    return !GeolocationUtils.isNotNilAndValid(position, opts);
-  }
-
-  static computeDistanceInMiles(position1: IPosition, position2: IPosition): number {
-    // Invalid position(s): skip
-    if (GeolocationUtils.isNilOrInvalid(position1, { debug: true }) || GeolocationUtils.isNilOrInvalid(position2, { debug: true })) return;
-
-    const latitude1Rad = (Math.PI * position1.latitude) / 180;
-    const longitude1Rad = (Math.PI * position1.longitude) / 180;
-    const latitude2Rad = (Math.PI * position2.latitude) / 180;
-    const longitude2Rad = (Math.PI * position2.longitude) / 180;
-
-    let distance =
-      2 *
-      6371 *
-      Math.asin(
-        Math.sqrt(
-          Math.pow(Math.sin((latitude1Rad - latitude2Rad) / 2), 2) +
-            Math.cos(latitude1Rad) * Math.cos(latitude2Rad) * Math.pow(Math.sin((longitude2Rad - longitude1Rad) / 2), 2)
-        )
-      );
-    distance = Math.round((distance / 1.852 + Number.EPSILON) * 100) / 100;
-    return distance;
-  }
-
-  /**
-   * Get the position by geo loc sensor
-   */
-  static async getCurrentPosition(platform: PlatformService | Platform, options?: PositionOptions): Promise<IPosition> {
-    // Use Capacitor plugin
-    if (platform.is('capacitor')) {
-      try {
-        console.info(`[geolocation-utils] Get current geo location, using Capacitor...(timeout: ${options?.timeout})`);
-        const pos: Position = await Geolocation.getCurrentPosition(options);
-        return <IPosition>{
-          latitude: pos.coords.latitude,
-          longitude: pos.coords.longitude,
-        };
-      } catch (err) {
-        console.error(`[geolocation-utils] Cannot get current geo location, using Capacitor: ${err?.message || ''}`);
-
-        // Detect some error, to add code
-        // FIXME - Capacitor use hardcoded strings! (see https://github.com/ionic-team/capacitor-plugins)
-        const message = ((err?.message || '') as string).toLowerCase();
-
-        // Permission denied
-        if (message.includes('location permission was denied') || message.includes('location disabled')) {
-          throw { ...err, code: GeolocationPositionError.PERMISSION_DENIED };
-        }
-
-        // Timeout
-        if (message.includes('timeout expired')) {
-          throw { ...err, code: GeolocationPositionError.TIMEOUT };
-        }
-        throw err;
-      }
-    }
-
-    // Or fallback to navigator
-    console.info('[geolocation-utils] Get current geo location, using browser...');
-    return new Promise<IPosition>((resolve, reject) => {
-      navigator.geolocation.getCurrentPosition(
-        (res) => {
-          resolve(<IPosition>{
-            latitude: res.coords.latitude,
-            longitude: res.coords.longitude,
-          });
-        },
-        (err) => {
-          let message = err?.message || err;
-          message = typeof message === 'string' ? message : JSON.stringify(message);
-          console.error('[geolocation-utils] Cannot get current geo location, using browser:' + message);
-          reject(err);
-        },
-        options
-      );
-    });
-  }
-}

package/src/app/shared/gesture/gesture-config.ts

@@ -1,43 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HammerGestureConfig } from '@angular/platform-browser';
-
-export const HAMMER_TAP_TIME = 250;
-export const HAMMER_PRESS_TIME = 400; // Increase need for double tap (default: 251 ms)
-/**
- * @hidden
- * This class overrides the default Angular gesture config.
- *
- */
-@Injectable({ providedIn: 'root' })
-export class AppGestureConfig extends HammerGestureConfig {
-  // Override HammerJS default settings
-  overrides = <any>{
-    press: {
-      time: HAMMER_PRESS_TIME,
-    },
-    pinch: {
-      enable: false,
-    },
-    rotate: {
-      enable: false,
-    },
-    // see https://hammerjs.github.io/recognizer-swipe/
-    swipe: {
-      threshold: 30, // Minimal distance required before recognizing.
-      velocity: 0.4, //Minimal velocity required before recognizing, unit is in px per ms.
-    },
-  };
-
-  buildHammer(element: HTMLElement) {
-    // DEBUG
-    console.debug('[gesture] Applying HammerJS config to ', element.tagName);
-
-    const mc = new (<any>window).Hammer(element);
-
-    for (const eventName in this.overrides) {
-      if (eventName) mc.get(eventName).set(this.overrides[eventName]);
-    }
-
-    return mc;
-  }
-}

package/src/app/shared/gesture/hammer.utils.ts

@@ -1,14 +0,0 @@
-export declare type HammerSwipeAction = 'swipeleft' | 'swiperight';
-export declare interface HammerSwipeEvent extends Event {
-  type: HammerSwipeAction;
-  pointerType?: 'touch' | any;
-  center?: { x: number; y: number };
-  distance?: number;
-  velocity?: number;
-  srcEvent?: Event;
-}
-
-export declare interface HammerTapEvent extends Event {
-  tapCount?: number;
-  srcEvent?: Event;
-}

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

@@ -1,69 +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,270 +0,0 @@
-import { PredefinedColors } from '@ionic/core';
-import { isNil, isNotNil } from '../functions';
-
-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 an array with the given color
-   **/
-  static fix(length?: number, colorName?: ColorName): string[] {
-    const color = Color.get(colorName || 'primary').rgba(0.5);
-    return new Array<string>(length || 25).fill(color);
-  }
-
-  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,67 +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';
-import { CanLeave } from '../../core/form/form.utils';
-
-@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();
-      }
-
-      // Emit
-      if (typeof component.deactivate === 'function') {
-        if (this.debug) console.debug(`[dirty-guard] calling deactivate()`);
-        component.deactivate();
-      }
-
-      // Allow deactivation
-      return true;
-    }
-
-    // Cancel deactivate
-    return false;
-  }
-}

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

@@ -1,11 +0,0 @@
-<table class="ion-padding">
-  <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,37 +0,0 @@
-:host {
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    color: #212529;
-  }
-
-  th {
-    font-weight: 500;
-    text-align: left;
-    vertical-align: bottom;
-    padding: 0.75rem;
-    border-top: 1px solid #dee2e6;
-    border-bottom: 2px solid #dee2e6;
-  }
-
-  td {
-    vertical-align: top;
-    border-top: 1px solid #dee2e6;
-    padding: 0.75rem;
-  }
-
-  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,14 +0,0 @@
-import { Component, 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 {
-  hotkeys: any[];
-
-  constructor(@Inject(MAT_DIALOG_DATA) protected data: any) {
-    this.hotkeys = Array.from(this.data);
-  }
-}