@sumaris-net/ngx-components 18.11.0 → 18.12.0

package/src/app/shared/audio/audio.ts

@@ -0,0 +1,273 @@
+import { Injectable, Optional } from '@angular/core';
+import { Platform } from '@ionic/angular';
+import { AudioManagement, AudioMode, AudioModeReturn } from '@awesome-cordova-plugins/audio-management/ngx';
+import { isNil, sleep, toBoolean } from '../functions';
+import { StartableService } from '../services/startable-service.class';
+import { Haptics } from '@capacitor/haptics';
+import { NativeAudio } from '@capacitor-community/native-audio';
+import { Capacitor } from '@capacitor/core';
+
+export type AudioType = 'html5' | 'native';
+export interface Sound {
+  assetId: string; // unique identifier of the file
+  assetPath: string; //  relative path of the file or absolute url (file://)
+  volume?: number; // Sound volume
+  isUrl?: boolean; // pass true if assetPath is a `file://` url
+  time?: number; // sound seek time
+  audioChannelNum?: number; // number of audio channels
+  vibration?: number | number[]; // Should vibrate ? set duration
+}
+
+const SYSTEM_SOUNDS: Sound[] = [
+  { assetId: 'startup', assetPath: 'assets/audio/unfa-ping.mp3', vibration: [300, 250, 750] },
+  { assetId: 'beep-confirm', assetPath: 'assets/audio/beep-confirm.mp3', vibration: 250 },
+  { assetId: 'beep-error', assetPath: 'assets/audio/beep-error.mp3', vibration: 1000 },
+  { assetId: 'beep-notification', assetPath: 'assets/audio/beep-notification.mp3', vibration: [450, 150, 450] },
+];
+
+const DEFAULT_AUDIO_MODE_RETURN: AudioModeReturn = {
+  audioMode: AudioMode.NORMAL,
+  label: 'Normal',
+};
+
+function audioModeToString(mode: AudioMode) {
+  switch (mode) {
+    case AudioMode.SILENT:
+      return 'Silent';
+    case AudioMode.NORMAL:
+      return 'Normal';
+    case AudioMode.VIBRATE:
+      return 'Vibrate';
+  }
+}
+
+@Injectable({ providedIn: 'root' })
+export class AudioProvider extends StartableService<void> {
+  private _audioType: AudioType;
+  private _audioMode: AudioMode = AudioMode.NORMAL;
+  private _enableAudioManagment = false;
+  private _assetPathPrefix = '';
+
+  private _preloadedSounds: { [id: string]: Sound } = {};
+  private _htmlAudioCache: { [id: string]: HTMLAudioElement } = {};
+
+  constructor(
+    protected platform: Platform,
+    @Optional() private audioManagement: AudioManagement
+  ) {
+    super(platform);
+    console.info(`[audio] Create audio provider`);
+  }
+
+  protected async ngOnStart(): Promise<void> {
+    const cordova = this.platform.is('cordova');
+    this._assetPathPrefix = cordova ? 'public/' : '';
+    this._audioType = cordova && Capacitor.isPluginAvailable('NativeAudio') ? 'native' : 'html5';
+    this._enableAudioManagment = cordova && this.audioManagement && this.platform.is('android');
+    console.info(`[audio] Starting audio provider {type: ${this._audioType}, management: ${this._enableAudioManagment}}...`);
+
+    // Listen audio mode changed
+    if (this._enableAudioManagment) {
+      await this.readAudioMode();
+    }
+
+    // Pre-loading system sounds
+    console.debug('[audio] Preloading audio sounds...');
+    let errorCount = 0;
+    await Promise.all(
+      SYSTEM_SOUNDS.map((s) => {
+        // Disable vibration in HTML 5 mode
+        if (this._audioType === 'html5') s.vibration = undefined;
+        return this.preload(s).catch((_) => errorCount++);
+      })
+    );
+
+    if (errorCount > 0) {
+      console.warn('[audio] Preloading audio sounds [OK] with ${errorCount} errors during preload.');
+    } else {
+      console.debug('[audio] Preloading audio sounds [OK]');
+    }
+  }
+
+  playBeepConfirm(): Promise<any> {
+    return this.play('beep-confirm', {
+      // Vibrate only if in vibration mode
+      vibrate: this._audioMode === AudioMode.VIBRATE,
+    });
+  }
+
+  playBeepError(): Promise<any> {
+    return this.play('beep-error', {
+      // Always vibrate (will skip vibration if silent mode)
+      vibrate: true,
+    });
+  }
+
+  async playBeepNotification(): Promise<any> {
+    await this.play('beep-notification', {
+      vibrate: this._audioMode === AudioMode.VIBRATE,
+    });
+  }
+
+  async playStartupSound(): Promise<any> {
+    return this.play('startup');
+  }
+
+  async preload(sound: Sound) {
+    if (!sound?.assetId) return; // Skip
+    if (this._preloadedSounds[sound.assetId]) return; // Already preloaded
+    if (isNil(this._audioType)) await this.ready();
+
+    const assetPath = (this._assetPathPrefix || '') + sound.assetPath;
+    console.info(`[audio] Preloading sound '${sound.assetId}', from file '${assetPath}'...`);
+
+    try {
+      if (this._audioType === 'native') {
+        this._preloadedSounds[sound.assetId] = sound;
+        await NativeAudio.preload({
+          audioChannelNum: 1,
+          isUrl: false,
+          ...sound,
+          assetPath,
+        });
+      } else {
+        this._htmlAudioCache[sound.assetId] = new Audio(assetPath);
+        this._preloadedSounds[sound.assetId] = sound;
+      }
+
+      // Add to map
+      console.info(`[audio] Preloading sound '${sound.assetId}' [OK]`);
+    } catch (err) {
+      const errorMsg = err?.message || err;
+      if (errorMsg === 'Audio Asset already exists') {
+        console.info(`[audio] Preloading sound '${sound.assetId}': Skipped (${errorMsg})`);
+      } else {
+        this._preloadedSounds[sound.assetId] = null;
+        console.error(`[audio] Unable to preload sound '${sound.assetId}', from file '${assetPath}': ${errorMsg}\n${err?.originalStack || ''}`);
+        throw err;
+      }
+    }
+  }
+
+  async play(assetId: string, opts?: { vibrate?: boolean; vibration?: number | number[] }) {
+    // Make sure provider is ready
+    if (!this.started) await this.ready();
+
+    const sound = this._preloadedSounds[assetId];
+    if (!sound) {
+      throw Error(`Unable to find sound '${assetId}'. Please call preload() before playing a sound.`);
+    }
+
+    // If silent: skip
+    if (this._audioMode === AudioMode.SILENT) return;
+
+    const promises: Promise<any>[] = [];
+
+    // Normal mode = can play the sound
+    if (this._audioMode === AudioMode.NORMAL) {
+      // Use native audio
+      if (this._audioType === 'native') {
+        promises.push(
+          NativeAudio.play({
+            assetId: sound.assetId,
+            time: sound.time || 0,
+          })
+        );
+      }
+      // Or HTML 5 audio
+      else {
+        const audio = this._htmlAudioCache[assetId] || new Audio(sound.assetPath);
+        promises.push(audio.play());
+      }
+    }
+
+    // Vibrate mode: by default make vibration is enable
+    else if (isNil(sound.vibration) && isNil(opts && opts.vibrate)) {
+      opts = opts || {};
+      opts.vibrate = true;
+    }
+
+    // Do vibration (if sound as default vibration, or if user ask for it)
+    if (toBoolean(opts?.vibrate, !!sound.vibration)) {
+      promises.push(this.vibrate((opts && opts.vibration) || sound.vibration));
+    }
+
+    return (promises.length === 1 ? promises[0] : Promise.all(promises)).catch((err) => {
+      console.error(`[audio] Error while playing audio sound '${assetId}': ${(err && err.message) || err}`, err);
+    });
+  }
+
+  async unload(assetId: string) {
+    if (isNil(this._audioType)) await this.ready();
+
+    // Remove from map
+    this._preloadedSounds[assetId] = undefined;
+
+    // Native unload
+    if (this._audioType === 'native') {
+      try {
+        await NativeAudio.unload({ assetId });
+      } catch (err) {
+        console.error(`[audio] Unable to unload audio '${assetId}': ${(err && err.message) || err}`, err);
+      }
+    }
+    // HTML5 audio unload
+    else {
+      this._htmlAudioCache[assetId].remove();
+      this._htmlAudioCache[assetId] = undefined;
+    }
+  }
+
+  /**
+   *
+   * @param duration Duration of the vibration in milliseconds.
+   */
+  async vibrate(duration?: number | number[]) {
+    if (!this.started) await this.ready();
+    if (Array.isArray(duration)) {
+      if (this._debug) console.debug('[audio] Vibrate: ' + JSON.stringify(duration));
+      for (let i = 0; i < duration.length; i++) {
+        const time = duration[i];
+        const silent = i % 2 !== 0;
+        if (silent) {
+          if (this._debug) console.debug('[audio] silent during ' + time);
+          await sleep(time);
+        } else {
+          if (this._debug) console.debug('[audio] vibrate during ' + time);
+          await Promise.all([Haptics.vibrate({ duration: time }), sleep(time)]);
+        }
+      }
+    } else {
+      if (this._debug) console.debug('[audio] vibrate during ' + duration);
+      await Haptics.vibrate({ duration });
+    }
+  }
+
+  async setAudioMode(mode: AudioMode): Promise<void> {
+    if (!this._enableAudioManagment) {
+      console.debug(`[audio] Cannot change audio mode to {${audioModeToString(mode)}} - skipping`);
+      return;
+    }
+
+    try {
+      console.info(`[audio] Changing audio mode to {${audioModeToString(mode)}}`);
+      await this.audioManagement.setAudioMode(mode);
+      this._audioMode = mode;
+    } catch (err) {
+      console.error(`[audio] Error while changing audio mode to {${audioModeToString(mode)}}: ${err?.message || err}`, err);
+      // Continue
+    }
+  }
+
+  /* -- protected methods  -- */
+
+  protected async readAudioMode() {
+    let value = await this.audioManagement.getAudioMode();
+    value = {
+      ...DEFAULT_AUDIO_MODE_RETURN,
+      ...value,
+    };
+    console.debug(`[audio] Detected audio mode {label: '${value.label}', audioMode: ${value.audioMode}}`);
+    this._audioMode = value.audioMode;
+  }
+}

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

@@ -0,0 +1,66 @@
+// Converts an ArrayBuffer directly to base64, without any intermediate 'convert to string then
+// use window.btoa' step. According to my tests, this appears to be a faster approach:
+// http://jsperf.com/encoding-xhr-image-data/5
+
+/*
+MIT LICENSE
+Copyright 2011 Jon Leighton
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+export function base64ArrayBuffer(arrayBuffer) {
+  let base64 = '';
+  const encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+  const bytes = new Uint8Array(arrayBuffer);
+  const byteLength = bytes.byteLength;
+  const byteRemainder = byteLength % 3;
+  const mainLength = byteLength - byteRemainder;
+
+  let a;
+  let b;
+  let c;
+  let d;
+  let chunk;
+
+  // Main loop deals with bytes in chunks of 3
+  for (let i = 0; i < mainLength; i += 3) {
+    // Combine the three bytes into a single integer
+    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
+
+    // Use bitmasks to extract 6-bit segments from the triplet
+    a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
+    b = (chunk & 258048) >> 12; // 258048   = (2^6 - 1) << 12
+    c = (chunk & 4032) >> 6; // 4032     = (2^6 - 1) << 6
+    d = chunk & 63; // 63       = 2^6 - 1
+
+    // Convert the raw binary segments to the appropriate ASCII encoding
+    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
+  }
+
+  // Deal with the remaining bytes and padding
+  if (byteRemainder === 1) {
+    chunk = bytes[mainLength];
+
+    a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
+
+    // Set the 4 least significant bits to zero
+    b = (chunk & 3) << 4; // 3   = 2^2 - 1
+
+    base64 += `${encodings[a]}${encodings[b]}==`;
+  } else if (byteRemainder === 2) {
+    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
+
+    a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
+    b = (chunk & 1008) >> 4; // 1008  = (2^6 - 1) << 4
+
+    // Set the 2 least significant bits to zero
+    c = (chunk & 15) << 2; // 15    = 2^4 - 1
+
+    base64 += `${encodings[a]}${encodings[b]}${encodings[c]}=`;
+  }
+
+  return base64;
+}

package/src/app/shared/capacitor/keyboard.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Capacitor, PluginListenerHandle } from '@capacitor/core';
+import { CapacitorPlugins } from './plugins';
+import { Keyboard } from '@capacitor/keyboard';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Platform } from '@ionic/angular';
+
+@Injectable({ providedIn: 'root' })
+export class KeyboardService {
+  private _enable = false;
+  private _visibleSubject = new BehaviorSubject<boolean>(false);
+  private _handlers: PluginListenerHandle[];
+
+  get visibleSubject(): Observable<boolean> {
+    return this._visibleSubject.asObservable();
+  }
+
+  get visible(): boolean {
+    return this._visibleSubject.value;
+  }
+  get enable(): boolean {
+    return this._enable;
+  }
+
+  constructor(private platform: Platform) {
+    platform.ready().then(() => this.init());
+  }
+
+  private async init() {
+    this._enable = this.platform.is('capacitor') && Capacitor.isPluginAvailable(CapacitorPlugins.Keyboard);
+    if (this._enable) {
+      this._handlers = await Promise.all([
+        Keyboard.addListener('keyboardWillShow', () => this._visibleSubject.next(true)),
+        Keyboard.addListener('keyboardDidHide', () => this._visibleSubject.next(false)),
+      ]);
+    }
+  }
+}

package/src/app/shared/capacitor/plugins.ts

@@ -0,0 +1,12 @@
+import { Capacitor } from '@capacitor/core';
+
+export declare type CapacitorPluginType = 'Camera' | 'StatusBar' | 'Keyboard' | 'BarcodeScanner';
+
+export class CapacitorPlugins {
+  static readonly Camera = 'Camera';
+  static readonly StatusBar = 'StatusBar';
+  static readonly Keyboard = 'Keyboard';
+  //static readonly BarcodeScanner = 'BarcodeScanner';
+
+  static isAvailable = Capacitor.isPluginAvailable;
+}

package/src/app/shared/constants.ts

@@ -0,0 +1,19 @@
+export const DATE_ISO_PATTERN = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
+export const DATE_PATTERN = 'YYYY-MM-DD';
+export const DATE_MATCH_REGEXP = new RegExp(/^\d+[-]\d+[-]\d+$/g);
+export const DEFAULT_PLACEHOLDER_CHAR = '\u005F'; // underscore
+export const PUBKEY_REGEXP = /^[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{43,44}$/;
+export const SPACE_PLACEHOLDER_CHAR = '\u2000';
+export const SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL = /\u2000/g;
+
+// See https://unicode-search.net/unicode-namesearch.pl?term=ZERO
+export const EMPTY_PLACEHOLDER_CHAR = '\uFEFF'; // ZERO WIDTH NO-BREAK SPACE
+export const EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL = /\uFEFF/g; // ZERO WIDTH NO-BREAK SPACE
+
+export const PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL = /[+]/g;
+
+export const KEYBOARD_HIDE_DELAY_MS = 250; // 1s
+
+// Separator to join properties (see `joinPropertiesPath()` or `referentialToString()` )
+export const DEFAULT_JOIN_PROPERTIES_SEPARATOR: string = ' - ';
+export const DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR: string = ', ';

package/src/app/shared/dates.ts

@@ -0,0 +1,206 @@
+import * as momentImported from 'moment';
+import { Duration, DurationInputArg1, DurationInputArg2, isMoment, Moment, MomentFormatSpecification, MomentInput, unitOfTime } from 'moment/moment';
+import { DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN } from './constants';
+import { unwrapESModule } from './modules';
+
+// // Workaround for issue https://github.com/ng-packagr/ng-packagr/issues/2215
+declare type MomentFn = {
+  (inp?: MomentInput, strict?: boolean): Moment;
+  (inp?: MomentInput, format?: MomentFormatSpecification, strict?: boolean): Moment;
+  (inp?: MomentInput, format?: MomentFormatSpecification, language?: string, strict?: boolean): Moment;
+  duration: (inp?: DurationInputArg1, unit?: DurationInputArg2) => Duration;
+};
+const _moment = unwrapESModule<MomentFn>(momentImported);
+
+export const DATE_UNIX_TIMESTAMP = 'X';
+export const DATE_UNIX_MS_TIMESTAMP = 'x';
+export const MOMENT_NO_TIME_PROPERTY = '_hasNoTime';
+
+export class DateUtils {
+  static moment = _moment;
+
+  static toDateISOString = toDateISOString;
+  static fromDateISOString = fromDateISOString;
+  static toDuration = toDuration;
+
+  static min(date1: Moment, date2: Moment): Moment {
+    const d1 = fromDateISOString(date1);
+    const d2 = fromDateISOString(date2);
+    return d1 && (!d2 || d1.isSameOrBefore(d2)) ? d1 : d2;
+  }
+
+  static max(date1: Moment | string, date2: Moment | string): Moment {
+    const d1 = fromDateISOString(date1);
+    const d2 = fromDateISOString(date2);
+    return d1 && (!d2 || d1.isSameOrAfter(d2)) ? d1 : d2;
+  }
+
+  static equals(date1: Moment | string, date2: Moment | string): boolean {
+    return DateUtils.isSame(date1, date2);
+  }
+
+  static isSame(date1: Moment | string, date2: Moment | string, granularity?: unitOfTime.StartOf): boolean {
+    const d1 = fromDateISOString(date1);
+    const d2 = fromDateISOString(date2);
+    return (!d1 && !d2) || (d1 && d1.isSame(d2, granularity));
+  }
+
+  static compare(date1: Moment | string, date2: Moment | string, granularity?: unitOfTime.StartOf): number {
+    const d1 = fromDateISOString(date1);
+    const d2 = fromDateISOString(date2);
+    if ((!d1 && !d2) || d1?.isSame(d2, granularity)) return 0; // Equals
+    if (d1?.isAfter(d2, granularity)) return 1; // After
+    return -1; // Before
+  }
+
+  /**
+   * Calculates the absolute difference between two dates in the specified units.
+   *
+   * @param {Moment | string} date1 - The first date to compare.
+   * @param {Moment | string} date2 - The second date to compare.
+   * @param {unitOfTime.Base} [durationUnit='seconds'] - The unit of time to express the difference in (default is 'seconds').
+   * @return {number} The absolute difference between the two dates expressed in the specified units.
+   */
+  static diffAbs(date1: Moment | string, date2: Moment | string, durationUnit: unitOfTime.Base = 'seconds'): number {
+    const d1 = fromDateISOString(date1);
+    const d2 = fromDateISOString(date2);
+    if (!d1 || !d2) throw new Error('Missing 2 first required arguments'); // Cannot compute
+    return DateUtils.moment.duration(d1.diff(d2)).abs().as(durationUnit);
+  }
+
+  /**
+   * Create a copy of a date, without time fields (always return a new Moment object, or undefined).
+   * Same implementation as the Java class Dates.resetTime() (see any SUMARiS like Pod)
+   *
+   * @param value
+   * @param timezone a timezone (see https://momentjs.com/timezone/)
+   * @param keepLocalTime if true, only the timezone (and offset) is updated, keeping the local time same. Consequently, it will now point to a different point in time if the offset has changed.
+   */
+  static resetTime(value: Moment | string, timezone?: string, keepLocalTime?: boolean): Moment | undefined {
+    if (!value) return undefined;
+    const date = fromDateISOString(value);
+    // No timezone
+    if (!timezone) {
+      return date.clone().startOf('day');
+    }
+    // Use timezone
+    return date
+      .clone() // clone the original date
+      .tz(timezone, keepLocalTime)
+      .startOf('day');
+  }
+
+  static markNoTime(value: Moment): Moment | undefined {
+    if (!value) return undefined;
+    value[MOMENT_NO_TIME_PROPERTY] = true;
+    return value;
+  }
+
+  static markTime(value: Moment): Moment | undefined {
+    if (!value) return undefined;
+    delete value[MOMENT_NO_TIME_PROPERTY];
+    return value;
+  }
+
+  static isNoTime(value: Moment): boolean {
+    return value?.[MOMENT_NO_TIME_PROPERTY] === true;
+  }
+
+  /**
+   * Test if a date is on the given day of week
+   *
+   * @param date
+   * @param weekday
+   * @param timezone
+   */
+  static isAtDay(date: string | Moment, weekday: number, timezone?: string): boolean {
+    let momentDate = date && fromDateISOString(date);
+    if (!momentDate) return false;
+    if (timezone) momentDate = momentDate.clone().tz(timezone).startOf('day');
+    return momentDate.day() === weekday;
+  }
+
+  static durationToString(
+    value: number,
+    dayUnit: string,
+    opts?: unitOfTime.DurationConstructor | { unit?: unitOfTime.DurationConstructor; seconds?: boolean } | any
+  ): string {
+    if (!value) return '';
+    const unit: unitOfTime.DurationConstructor = opts?.unit || opts || 'hours';
+
+    // try with moment
+    const duration = toDuration(value, unit);
+
+    const days = duration.days();
+    const hours = duration.hours().toString().padStart(3, '0');
+    const minutes = duration.minutes().toString().padStart(2, '0');
+    const seconds = opts?.seconds ? duration.seconds().toString().padStart(2, '0') : null;
+
+    return (days > 0 ? days.toString() + (dayUnit + ' ') : '') + hours + ':' + minutes + (seconds ? ':' + seconds : '');
+  }
+}
+
+export function toDateISOString(value: any): string | undefined {
+  if (!value) return undefined;
+
+  // Already a valid ISO date time string (without timezone): use it
+  if (typeof value === 'string' && value.indexOf('+') === -1 && value.lastIndexOf('Z') === value.length - 1) {
+    return value;
+  }
+  // Make sure to have a Moment object
+  const date = fromDateISOString(value);
+  if (!date) return undefined;
+  return DateUtils.isNoTime(date) ? date.toISOString(true /* important ! */).substring(0, 10) : date.toISOString();
+}
+
+export function fromDateISOString(value: any): Moment | undefined {
+  // Already a moment object: use it
+  if (!value || isMoment(value)) return value;
+
+  if (typeof value === 'string' && !!value.match(DATE_MATCH_REGEXP)) {
+    // Parse the input value, as a date only
+    const dateOnly: Moment = DateUtils.moment(value, DATE_PATTERN, true);
+    return DateUtils.markNoTime(dateOnly);
+  }
+
+  // Parse the input value, as a ISO date time
+  const date: Moment = DateUtils.moment(value, DATE_ISO_PATTERN);
+  if (date.isValid()) return date;
+
+  // Not valid: trying to convert from unix timestamp
+  if (typeof value === 'string') {
+    console.warn('Wrong date format - Trying to convert from local time: ' + value);
+    if (value.length === 10) {
+      return DateUtils.moment(value, DATE_UNIX_TIMESTAMP);
+    } else if (value.length === 13) {
+      return DateUtils.moment(value, DATE_UNIX_MS_TIMESTAMP);
+    }
+  }
+
+  console.warn('Unable to parse date: ' + value);
+  return undefined;
+}
+
+export function fromUnixTimestamp(timeInSec: number) {
+  return DateUtils.moment(timeInSec, DATE_UNIX_TIMESTAMP);
+}
+export function fromUnixMsTimestamp(timeInMs: number) {
+  return DateUtils.moment(timeInMs, DATE_UNIX_MS_TIMESTAMP);
+}
+
+export function toDuration(value: number, unit?: unitOfTime.DurationConstructor): Duration | undefined {
+  if (!value) return undefined;
+
+  const duration = DateUtils.moment.duration(value, unit);
+
+  // fix 990+ ms
+  if (duration.milliseconds() >= 990) {
+    duration.add(1000 - duration.milliseconds(), 'ms');
+  }
+  // fix 59 s
+  if (duration.seconds() >= 59) {
+    duration.add(60 - duration.seconds(), 's');
+  }
+
+  return duration;
+}

package/src/app/shared/debug/debug-service.class.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+export const APP_DEBUG_DATA_SERVICE = new InjectionToken<IDebugDataService>('DebugDataService');
+
+export interface IDebugDataService {
+  sendDebugData: (data: any) => Promise<void>;
+}

package/src/app/shared/debug/debug.component.html

@@ -0,0 +1,13 @@
+<!-- debug -->
+<ion-item tappable (click)="toggle()" lines="none" color="secondary50">
+  <ion-icon slot="start" name="bug"></ion-icon>
+  <ion-label color="primary">{{ titlePrefix | translate }} {{ title }}</ion-label>
+  <mat-icon slot="end">{{ expansionPanel.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
+</ion-item>
+<mat-expansion-panel #expansionPanel [(expanded)]="expanded">
+  <ion-text color="primary100">
+    <div class="ion-margin-start">
+      <ng-content></ng-content>
+    </div>
+  </ion-text>
+</mat-expansion-panel>

package/src/app/shared/debug/debug.component.scss

@@ -0,0 +1,21 @@
+ion-item {
+  mat-icon,
+  ion-icon {
+    color: var(--ion-color-primary);
+  }
+  cursor: pointer !important;
+}
+.mat-expansion-panel {
+  --expansion-panel-padding: 4px;
+  background: var(--ion-color-secondary50) !important;
+
+  &.mat-expanded {
+    margin-bottom: 4px !important;
+  }
+
+  .mat-expansion-panel-body {
+    * {
+      color: var(--ion-color-primary100);
+    }
+  }
+}

package/src/app/shared/debug/debug.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugComponent } from './debug.component';
+
+describe('DebugComponent', () => {
+  let component: DebugComponent;
+  let fixture: ComponentFixture<DebugComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DebugComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DebugComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});