@sumaris-net/ngx-components 18.12.13 → 18.14.0

package/src/app/shared/pipes/file-size.pipe.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2019 Jonathan Catmull.
+ *
+ * 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.
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+
+/*
+ * Convert bytes into largest possible unit.
+ * Takes an precision argument that defaults to 2.
+ * Usage:
+ *   bytes | fileSize:precision
+ * Example:
+ *   {{ 1024 |  fileSize}}
+ *   formats to: 1 KB
+ */
+@Pipe({ name: 'fileSize' })
+export class FileSizePipe implements PipeTransform {
+  private units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+  transform(bytes: number = 0, precision: number = 2): string {
+    if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes)) return '?';
+
+    let unit = 0;
+
+    while (bytes >= 1024) {
+      bytes /= 1024;
+      unit++;
+    }
+
+    return bytes.toFixed(+precision) + ' ' + this.units[unit];
+  }
+}

package/src/app/shared/pipes/form.pipes.ts

@@ -0,0 +1,209 @@
+import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormErrorTranslateOptions, FormErrorTranslator } from '../validator/form-error-adapter.class';
+import { Subscription } from 'rxjs';
+import { equals, isNotNil } from '../functions';
+
+@Pipe({
+  name: 'formError',
+  pure: false,
+})
+export class FormErrorPipe implements PipeTransform, OnDestroy {
+  private _value = '';
+  private _lastForm: UntypedFormGroup | null = null;
+  private _lastOptions: FormErrorTranslateOptions | null = null;
+  private _onFormStatusChanges: Subscription | undefined;
+
+  constructor(
+    private service: FormErrorTranslator,
+    private _ref: ChangeDetectorRef
+  ) {}
+
+  transform(form: UntypedFormGroup, opts?: FormErrorTranslateOptions): string {
+    if (!form) {
+      this._dispose();
+      return '';
+    }
+
+    // if we ask another time for the same form and opts, return the last value
+    if (form === this._lastForm && equals(opts, this._lastOptions)) {
+      return this._value;
+    }
+
+    // store the query, in case it changes
+    this._lastForm = form;
+
+    // store the params, in case they change
+    this._lastOptions = opts;
+
+    // set the value
+    this._updateValue(form, opts);
+
+    // if there is a subscription to onLangChange, clean it
+    this._dispose();
+
+    // subscribe to onTranslationChange event, in case the translations change
+    if (!this._onFormStatusChanges) {
+      this._onFormStatusChanges = form.statusChanges.subscribe((status) => {
+        this._updateValue(form, opts, status);
+      });
+    }
+
+    return this._value;
+  }
+
+  ngOnDestroy(): void {
+    this._dispose();
+  }
+
+  private _updateValue(form: UntypedFormGroup, opts?: FormErrorTranslateOptions, status?: any) {
+    if (status ? status === 'INVALID' : form.invalid) {
+      const newValue = this.service.translateFormErrors(form, opts);
+      if (newValue !== this._value) {
+        this._value = newValue;
+        this._ref.markForCheck();
+      }
+    } else if (this._value !== undefined) {
+      this._value = undefined;
+      this._ref.markForCheck();
+    }
+  }
+
+  /**
+   * Clean any existing subscription to change events
+   */
+  private _dispose(): void {
+    this._onFormStatusChanges?.unsubscribe();
+    this._onFormStatusChanges = undefined;
+  }
+}
+
+/**
+ * Same a FormErrorPipe
+ * @deprecated use `formError` instead
+ */
+@Pipe({
+  name: 'translateFormError',
+  pure: false,
+})
+export class FormErrorTranslatePipe extends FormErrorPipe {
+  constructor(service: FormErrorTranslator, _ref: ChangeDetectorRef) {
+    super(service, _ref);
+  }
+  transform(form: UntypedFormGroup, opts?: FormErrorTranslateOptions): string {
+    return super.transform(form, opts);
+  }
+}
+
+@Pipe({
+  name: 'formGet',
+})
+export class FormGetPipe implements PipeTransform {
+  transform(form: AbstractControl, path: Array<string | number> | string): AbstractControl {
+    return form.get(path);
+  }
+}
+
+@Pipe({
+  name: 'formGetControl',
+})
+export class FormGetControlPipe implements PipeTransform {
+  transform(form: AbstractControl, path?: Array<string | number> | string): UntypedFormControl {
+    return (form && isNotNil(path) ? form.get(path) : form) as UntypedFormControl;
+  }
+}
+
+@Pipe({
+  name: 'formGetArray',
+})
+export class FormGetArrayPipe implements PipeTransform {
+  transform(form: AbstractControl, path?: Array<string | number> | string): UntypedFormArray {
+    return (form && isNotNil(path) ? form.get(path) : form) as UntypedFormArray;
+  }
+}
+
+@Pipe({
+  name: 'formGetGroup',
+})
+export class FormGetGroupPipe implements PipeTransform {
+  transform(form: AbstractControl, path?: Array<string | number> | string): UntypedFormGroup {
+    return (form && isNotNil(path) ? form.get(path) : form) as UntypedFormGroup;
+  }
+}
+
+@Pipe({
+  name: 'formGetValue',
+  pure: false,
+})
+export class FormGetValuePipe implements PipeTransform, OnDestroy {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _value: any = undefined;
+  private _lastControl: AbstractControl | null = null;
+  private _lastPath: Array<string | number> | string;
+  private _onControlValueChanges: Subscription | undefined;
+  private _onControlStatusChanges: Subscription | undefined;
+
+  constructor(private _ref: ChangeDetectorRef) {}
+
+  transform<T = any>(form: AbstractControl, path?: Array<string | number> | string, listenStatusChanges = false): T {
+    if (!form) {
+      this._dispose();
+      return undefined;
+    }
+
+    // if we ask another time for the same form and opts, return the last value
+    if (form === this._lastControl && equals(path, this._lastPath)) {
+      return this._value;
+    }
+
+    // store the query, in case it changes
+    this._lastControl = form;
+
+    // store the params, in case they change
+    this._lastPath = path;
+
+    // set the value
+    const control = path ? form.get(path) : form;
+    this._value = control?.value;
+
+    // if there is already a subscription, clean it
+    this._dispose();
+
+    if (control) {
+      // subscribe to valueChanges event
+      this._onControlValueChanges = control.valueChanges.subscribe((value) => {
+        if (value !== this._value) {
+          this._value = value;
+          this._ref.markForCheck();
+        }
+      });
+
+      // subscribe to statusChanges event
+      if (listenStatusChanges) {
+        this._onControlStatusChanges = control.statusChanges.subscribe(() => {
+          const value = control.value;
+          if (value !== this._value) {
+            this._value = value;
+            this._ref.markForCheck();
+          }
+        });
+      }
+    }
+
+    return this._value;
+  }
+
+  ngOnDestroy(): void {
+    this._dispose();
+  }
+
+  /**
+   * Clean any existing subscription to change events
+   */
+  private _dispose(): void {
+    this._onControlValueChanges?.unsubscribe();
+    this._onControlValueChanges = undefined;
+    this._onControlStatusChanges?.unsubscribe();
+    this._onControlStatusChanges = undefined;
+  }
+}

package/src/app/shared/pipes/highlight.pipe.ts

@@ -0,0 +1,41 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { removeDiacritics, toBoolean } from '../functions';
+import { RegExpUtils } from '../regexps';
+
+@Pipe({
+  name: 'highlight',
+})
+@Injectable({ providedIn: 'root' })
+export class HighlightPipe implements PipeTransform {
+  // Replace search text by bold representation
+  transform(value: any, args?: string | { search: string; withAccent?: boolean }): string {
+    if (typeof value !== 'string' || !args) return value;
+    let searchText = typeof args === 'string' ? args : args.search;
+    const withAccent = typeof args !== 'string' ? toBoolean(args?.withAccent, false) : false;
+
+    // Skip if :
+    // - not a string (e.g. an object)
+    // - or blank string
+    if (typeof searchText !== 'string') return value;
+
+    // Remove unnecessary wildcard (e.g. 'a**' becomes 'a')
+    searchText = RegExpUtils.cleanSearchText(searchText);
+    if (!searchText?.length) return value;
+
+    if (withAccent) {
+      // Remove all accent characters to allow versatile comparison
+      const cleanedSearchText = removeDiacritics(searchText.toUpperCase());
+      const cleanValue = removeDiacritics(value.toUpperCase());
+      const startIndex = cleanValue.indexOf(cleanedSearchText);
+      if (startIndex === -1) return value; // no match
+      const endIndex = startIndex + cleanedSearchText.length;
+      return value.substring(0, startIndex) + '<b>' + value.substring(startIndex, endIndex) + '</b>' + value.substring(endIndex);
+    }
+
+    // Default behaviour, using regexp
+    else {
+      const regexp = RegExpUtils.compileSearchRegexp(searchText, 'i');
+      return value.replace(regexp, '<b>$&</b>');
+    }
+  }
+}

package/src/app/shared/pipes/html.pipes.ts

@@ -0,0 +1,49 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { noHtml } from '../functions';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'noHtml',
+})
+/**
+ * Remove all HTML tags, from an input string
+ */
+export class NoHtmlPipe implements PipeTransform {
+  transform(value: string): string {
+    return noHtml(value);
+  }
+}
+
+@Pipe({
+  name: 'safeHtml',
+})
+/**
+ * SafeHtmlPipe is a custom Angular pipe designed to sanitize and transform
+ * potentially unsafe HTML content into safe HTML. It leverages the noHtml
+ * function to strip away any HTML tags from the input string, ensuring that
+ * the output string is safe for display in the frontend without risking
+ * security vulnerabilities like Cross-Site Scripting (XSS) attacks.
+ *
+ * This pipe can be used when there is a need to render user-generated or
+ * dynamically fetched HTML content safely within an Angular application.
+ *
+ * Methods:
+ * - transform: Accepts a string as input and returns a sanitized version
+ *              of the string with HTML tags removed.
+ */
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitized: DomSanitizer) {}
+  transform(value: string): SafeHtml {
+    return this.sanitized.bypassSecurityTrustHtml(value);
+  }
+}
+
+@Pipe({
+  name: 'safeStyle',
+})
+export class SafeStylePipe implements PipeTransform {
+  constructor(private sanitized: DomSanitizer) {}
+  transform(value: string): SafeHtml {
+    return this.sanitized.bypassSecurityTrustStyle(value);
+  }
+}

package/src/app/shared/pipes/latlong-format.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { formatLatitude, formatLongitude, LatLongFormatOptions } from '../material/latlong/latlong.utils';
+
+@Pipe({
+  name: 'latitudeFormat',
+})
+export class LatitudeFormatPipe implements PipeTransform {
+  transform = formatLatitude;
+}
+
+@Pipe({
+  name: 'longitudeFormat',
+})
+export class LongitudeFormatPipe implements PipeTransform {
+  transform = formatLongitude;
+}
+
+@Pipe({
+  name: 'latLongFormat',
+})
+/**
+ * @deprecated use 'latitudeFormat' or 'longitudeFormat' instead
+ */
+export class LatLongFormatPipe implements PipeTransform {
+  transform(value: number, opts?: Partial<LatLongFormatOptions> & { type: 'latitude' | 'longitude' }): string | Promise<string> {
+    return (!opts || opts?.type === 'latitude' ? formatLatitude : formatLongitude)(value, opts);
+  }
+}

package/src/app/shared/pipes/maps.pipe.ts

@@ -0,0 +1,41 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'mapGet',
+})
+@Injectable({ providedIn: 'root' })
+export class MapGetPipe implements PipeTransform {
+  transform<T = any, R = any>(val: T, args: keyof T | string | number | { key: keyof T | string | number; defaultValue?: any }): R {
+    // No map: return default value (or undefined)
+    if (!val) return args && (args as any)?.defaultValue;
+
+    const key = (args && typeof args === 'object' ? args.key : args) as any;
+
+    // No key: return default value (or undefined)
+    if (key === null || key === undefined) return args && (args as any)?.defaultValue;
+
+    return val[key] as R;
+  }
+}
+
+@Pipe({
+  name: 'mapKeys',
+})
+@Injectable({ providedIn: 'root' })
+export class MapKeysPipe implements PipeTransform {
+  transform(map: any, defaultValue?: any[]): any[] {
+    if (!map) return defaultValue;
+    return Object.keys(map);
+  }
+}
+
+@Pipe({
+  name: 'mapValues',
+})
+@Injectable({ providedIn: 'root' })
+export class MapValuesPipe implements PipeTransform {
+  transform<K = any, V = any>(map: any | Map<K, V>, defaultValue?: V[]): V[] {
+    if (!map) return defaultValue;
+    return Object.values(map);
+  }
+}

package/src/app/shared/pipes/maskito.pipe.ts

@@ -0,0 +1,68 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { isNilOrBlank, isNotNil } from '../functions';
+import { MaskitoMask, MaskitoOptions, MaskitoPlugin } from '@maskito/core';
+import { maskitoEventHandler, maskitoWithPlaceholder } from '@maskito/kit';
+import { getCaretPosition, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, selectInputRange } from '../inputs';
+
+export type MaskitoPlaceholderPipeOptions = { defaultPrefix?: string; noDefaults?: boolean } & Partial<MaskitoOptions>;
+
+@Pipe({
+  name: 'maskitoPlaceholder',
+})
+export class MaskitoPlaceholderPipe implements PipeTransform {
+  transform(placeholder: string, mask: MaskitoMask, opts?: MaskitoPlaceholderPipeOptions): MaskitoOptions {
+    if (isNilOrBlank(placeholder)) return { mask };
+
+    const plugins = [];
+    const preprocessors = [];
+    const postprocessors = [];
+
+    if (!opts?.noDefaults) {
+      const placeholderOptions = maskitoWithPlaceholder(placeholder, true);
+      plugins.push(...placeholderOptions.plugins);
+      preprocessors.push(...placeholderOptions.preprocessors);
+      postprocessors.push(...placeholderOptions.postprocessors);
+    }
+    plugins.push(...(opts?.plugins || []));
+    preprocessors.push(...(opts?.preprocessors || []));
+    postprocessors.push(...(opts?.postprocessors || []));
+
+    if (isNotNil(opts?.defaultPrefix)) {
+      plugins.push(maskitoPrefixPlugin(opts.defaultPrefix, placeholder));
+    }
+    plugins.push(maskitoAutoSelectByMaskPattern());
+
+    return {
+      overwriteMode: opts?.overwriteMode || 'replace',
+      plugins,
+      preprocessors,
+      postprocessors,
+      mask,
+    };
+  }
+}
+
+export function maskitoPrefixPlugin(prefix: string, placeholder?: string): MaskitoPlugin {
+  return maskitoEventHandler('focus', (element: HTMLInputElement | HTMLTextAreaElement, options: Required<MaskitoOptions>) => {
+    if (element.value === '') {
+      element.value = prefix;
+      element.dispatchEvent(new Event('input'));
+    } else if (element.value === placeholder) {
+      element.value = prefix + placeholder.substring(prefix.length);
+      element.dispatchEvent(new Event('input'));
+    }
+  });
+}
+
+export function maskitoAutoSelectByMaskPattern(): MaskitoPlugin {
+  return maskitoEventHandler('click', (element: HTMLInputElement | HTMLTextAreaElement, options: Required<MaskitoOptions>) => {
+    if (options?.mask instanceof Array) {
+      const caretIndex = getCaretPosition(element);
+      const maskPatternInputRanges = getInputSelectionRangesFromMask(options.mask);
+      const selectedInputRange = getInputRangeFromCaretIndex(caretIndex, maskPatternInputRanges);
+      if (isNotNil(selectedInputRange)) {
+        selectInputRange(element, selectedInputRange[0], selectedInputRange[1] + 1);
+      }
+    }
+  });
+}

package/src/app/shared/pipes/math.pipes.ts

@@ -0,0 +1,46 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { round } from '../functions';
+
+@Pipe({
+  name: 'mathAbs',
+})
+@Injectable({ providedIn: 'root' })
+export class MathAbsPipe implements PipeTransform {
+  transform(val: number): any {
+    if (val !== undefined && val !== null) {
+      return Math.abs(val);
+    } else {
+      return val;
+    }
+  }
+}
+
+@Pipe({
+  name: 'even',
+})
+@Injectable({ providedIn: 'root' })
+export class EvenPipe implements PipeTransform {
+  transform(val: number): any {
+    return val % 2 === 0;
+  }
+}
+
+@Pipe({
+  name: 'odd',
+})
+@Injectable({ providedIn: 'root' })
+export class OddPipe implements PipeTransform {
+  transform(val: number): any {
+    return val % 2 !== 0;
+  }
+}
+
+@Pipe({
+  name: 'round',
+})
+@Injectable({ providedIn: 'root' })
+export class RoundPipe implements PipeTransform {
+  transform(val: number, nbDecimal?: number): any {
+    return round(val, nbDecimal);
+  }
+}

package/src/app/shared/pipes/ng-init.pipe.ts

@@ -0,0 +1,13 @@
+import { Directive, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Directive({
+  selector: '[ngInit]',
+})
+export class NgInitDirective implements OnInit {
+  @Output()
+  ngInit = new EventEmitter<any>();
+
+  ngOnInit() {
+    this.ngInit.emit();
+  }
+}

package/src/app/shared/pipes/number-format.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { numberToString } from '../functions';
+
+@Pipe({
+  name: 'numberFormat',
+})
+export class NumberFormatPipe implements PipeTransform {
+  transform(val: number, opts?: Intl.NumberFormatOptions & { fixedDecimals?: number }): string | Promise<string> {
+    return numberToString(val, opts);
+  }
+}

package/src/app/shared/pipes/observable.pipes.ts

@@ -0,0 +1,46 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { isObservable, Observable } from 'rxjs';
+import { firstFalse, FirstOptions, firstTrue } from '../observables';
+import { first, map } from 'rxjs/operators';
+
+@Pipe({
+  name: 'firstTrue',
+})
+export class FirstTruePipe implements PipeTransform {
+  transform(value: Observable<boolean>, opts?: FirstOptions): Observable<boolean> {
+    return firstTrue(value, opts, true);
+  }
+}
+
+@Pipe({
+  name: 'firstFalse',
+})
+export class FirstFalsePipe implements PipeTransform {
+  transform(value: Observable<boolean>, opts?: FirstOptions): Observable<boolean> {
+    return firstFalse(value, opts, false);
+  }
+}
+
+@Pipe({
+  name: 'first',
+})
+export class FirstPipe implements PipeTransform {
+  transform<T = any>(value: Observable<T>): Observable<T> {
+    return value.pipe(first());
+  }
+}
+
+@Pipe({
+  name: 'map',
+})
+export class MapPipe implements PipeTransform {
+  transform<T, R>(value: Observable<T>, mapFn: (value: T) => R, ...otherArguments: any[]): Observable<R>;
+  transform<T, R>(value: T, mapFn: (value: T) => R, ...otherArguments: any[]): R;
+  transform<T, R>(value: Observable<T> | T, mapFn: (value: T) => R, ...otherArguments: any[]): Observable<R> | R {
+    if (isObservable(value)) {
+      return value.pipe(map((v) => mapFn.call(this, v, ...otherArguments)));
+    } else {
+      return mapFn.call(this, value, ...otherArguments);
+    }
+  }
+}