@sumaris-net/ngx-components 18.11.0 → 18.12.0

package/src/app/shared/file/uri.utils.ts

@@ -0,0 +1,31 @@
+export class UriUtils {
+  /**
+   * Extract the filename, from an uri (using the last slash)
+   *
+   * @param uri
+   */
+  static getFilename(uri: string): string {
+    if (!uri) return uri;
+    let filename = uri.trim();
+
+    // Get last part (or all string, if no '/')
+    const lastSlashIndex = filename.lastIndexOf('/');
+    if (lastSlashIndex !== -1 && lastSlashIndex !== uri.length - 1) {
+      filename = filename.substring(lastSlashIndex + 1);
+    }
+
+    // Remove query params
+    const queryParamIndex = filename.indexOf('?');
+    if (queryParamIndex !== -1) {
+      filename = filename.substring(0, queryParamIndex);
+    }
+
+    // Remove fragment
+    const fragmentParamIndex = filename.indexOf('#');
+    if (fragmentParamIndex !== -1) {
+      filename = filename.substring(0, fragmentParamIndex);
+    }
+
+    return filename;
+  }
+}

package/src/app/shared/file/url.utils.ts

@@ -0,0 +1,163 @@
+import { isNilOrBlank } from '../functions';
+
+export abstract class UrlUtils {
+  /**
+   * Determines if a given URL is a relative URL.
+   *
+   * @param {string | null} href - The URL to check.
+   * @return {boolean} True if the URL is relative, false otherwise.
+   */
+  static isRelativeUrl(href: string | null): boolean {
+    if (!href) return false;
+    return !href.startsWith('http:') && !href.startsWith('https:') && !href.startsWith('mailto:') && !href.startsWith('tel:');
+  }
+
+  /**
+   * Determines if a given URL is an internal URL.
+   *
+   * @param {string | null} href - The URL to be checked. Can be a string representing the URL or null.
+   * @return {boolean} Returns true if the URL is internal, otherwise false.
+   */
+  static isInternalUrl(href: string | null): boolean {
+    if (!href) return false;
+    return href.startsWith(window.location.origin) || this.isRelativeUrl(href);
+  }
+
+  static isExternalUrl(href: string | null): boolean {
+    if (!href) return false;
+    return !this.isInternalUrl(href);
+  }
+
+  /**
+   * Removes the query string from the given URL, returning only the base URL.
+   *
+   * @param {string} url - The URL from which the query string will be stripped.
+   * @return {string} The URL without the query string.
+   */
+  static stripQuery(url: string): string {
+    return /[^?]*/.exec(url)[0];
+  }
+
+  /**
+   * Removes the fragment and query components from a given URL string.
+   *
+   * @param {string} url - The URL string to process.
+   * @return {string} The URL without its fragment and query components.
+   */
+  static stripFragmentAndQuery(url: string): string {
+    if (!url) return url;
+    return this.stripQuery(/[^#]*/.exec(url)[0]);
+  }
+
+  /**
+   * Extracts the fragment identifier from the given URL.
+   *
+   * @param {string} url - The URL from which to extract the fragment.
+   * @return {string} The fragment identifier of the URL, excluding the '#' symbol.
+   */
+  static getFragment(url: string): string {
+    if (isNilOrBlank(url)) return '';
+
+    const match = url.match(/#(.*)$/);
+    return match ? match[1] : '';
+  }
+
+  static resolveRelativeUrl(baseUrl: string, relativePath: string, opts?: {absoluteByDefault: boolean}): string {
+    if (!baseUrl) throw new Error("Missing 'baseUrl' argument");
+    if (!relativePath) throw new Error("Missing 'relativePath' argument");
+    if (!this.isRelativeUrl(relativePath)) throw new Error("Should be a relative path");
+
+    // Detect absolute URL
+    if (relativePath.startsWith('/') || (opts?.absoluteByDefault && !relativePath.startsWith('.'))) {
+      baseUrl = this.getRootUrl(baseUrl);
+    }
+
+    return UrlUtils.normalizeUrl(UrlUtils.concat(baseUrl, relativePath));
+  }
+
+  /**
+   * Resolves a given URL by normalizing its parts, removing unnecessary path segments like "." and "..".
+   *
+   * @param {string} url - The URL to be resolved. Must be a non-empty string.
+   * @return {string} The resolved and cleaned URL string.
+   * @throws {Error} If the provided URL is missing or undefined.
+   */
+  static normalizeUrl(url: string): string {
+    if (!url) throw new Error("Missing 'url' argument");
+    return this.cleanUrl(url)
+      .split('/')
+      .reduce((res, part) => {
+        if (part === '.') return res;
+        if (part === '..' && res.length > 0) return res.slice(0, -1);
+        return res.concat(part);
+      }, [])
+      .join('/');
+  }
+
+  /**
+   * Extracts and returns the root URL from the given complete URL string.
+   *
+   * @param {string} url - The complete URL string from which the root URL will be extracted.
+   * @return {string} The root URL including the protocol and host (and port if present).
+   * @throws {Error} Throws an error if the provided URL is missing or is in an invalid format.
+   */
+  static getRootUrl(url: string): string {
+    if (!url) throw new Error("Missing 'url' argument");
+    let [protocol, path] = url.split('//', 2);
+    if (!protocol || isNilOrBlank(path)) throw new Error(`Invalid URL format: ${url}`);
+    const hostAndPort = path.split('/', 2)[0];
+    return `${protocol}//${hostAndPort}`;
+  }
+
+  /**
+   * Retrieves the parent URL or directory path from the provided URL.
+   * This method handles both relative and absolute URLs.
+   *
+   * @param {string} url - The URL from which to derive the parent path.
+   *                       Must be a valid URL or relative path.
+   * @return {string} The parent URL or directory path. Throws an error if the input is invalid.
+   */
+  static getParent(url: string): string {
+    if (!url) throw new Error("Missing 'url' argument");
+    const cleanUrl = this.stripFragmentAndQuery(url);
+    if (cleanUrl.endsWith('/')) return cleanUrl; // Skip if already a parent directory
+    const parentPath = cleanUrl + '/' + '..';
+    if (this.isRelativeUrl(url)) {
+      return this.resolveRelativeUrl(window.location.href, parentPath);
+    }
+    return this.normalizeUrl(parentPath);
+  }
+
+  /**
+   * Cleans the provided URL by encoding it safely and replacing specific patterns.
+   *
+   * @param {string} href - The URL string to be cleaned.
+   * @return {string|null} The cleaned and encoded URL string, or null if an error occurs.
+   */
+  static cleanUrl(href: string): string {
+    try {
+      href = encodeURI(href).replace(/%25/g, '%');
+    } catch (e) {
+      return null;
+    }
+    return href;
+  }
+
+  static addTrailingSlash(url: string): string {
+    return url.endsWith('/') ? url : url + '/';
+  }
+
+  static addStartingSlash(url: string): string {
+    return url.startsWith('/') ? url : '/' + url;
+  }
+
+  static removeStartingSlash(url: string): string {
+    return url.startsWith('/') ? url.substring(1) : url;
+  }
+
+  static concat(basePath: string, relativePath: string): string {
+    if (!basePath) return relativePath;
+    if (!relativePath) return basePath;
+    return this.addTrailingSlash(basePath) + this.removeStartingSlash(relativePath);
+  }
+}

package/src/app/shared/focusable.ts

@@ -0,0 +1,8 @@
+export interface FocusableElement {
+  focus();
+}
+
+export function isFocusableElement(object: any): object is FocusableElement {
+  if (!object) return false;
+  return 'focus' in object;
+}

package/src/app/shared/form/field.component.html

@@ -0,0 +1,380 @@
+<ng-container [ngSwitch]="type">
+  <!-- integer -->
+  <mat-form-field
+    *ngSwitchCase="'integer'"
+    [floatLabel]="floatLabel | asFloatLabelType"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [class]="classList"
+  >
+    @if (placeholder && floatLabel !== 'never') {
+      <mat-label>{{ placeholder }}</mat-label>
+    }
+
+    <input
+      matInput
+      #matInput
+      type="number"
+      autocomplete="off"
+      [readonly]="readonly"
+      [min]="definition.minValue"
+      [max]="definition.maxValue"
+      pattern="-?[0-9]*"
+      step="1"
+      [appAutofocus]="autofocus"
+      [placeholder]="floatLabel === 'never' ? placeholder : null"
+      (keyup.enter)="onKeyupEnter.emit($event)"
+      (keypress)="filterNumberInput($event, false)"
+      [formControl]="formControl"
+      [required]="required"
+      [tabIndex]="tabindex"
+      (click)="selectInputContentFromEvent($event)"
+    />
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+    <mat-error *ngIf="formControl.hasError('min')">
+      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}
+    </mat-error>
+    <mat-error *ngIf="formControl.hasError('max')">
+      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}
+    </mat-error>
+    <mat-error *ngIf="formControl.hasError('pattern')">
+      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}
+    </mat-error>
+    <mat-error *ngIf="formControl.hasError('integer')">
+      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}
+    </mat-error>
+
+    <button
+      matSuffix
+      *ngIf="clearable"
+      mat-icon-button
+      tabindex="-1"
+      type="button"
+      (click)="formControl.reset()"
+      [hidden]="formControl.disabled || (formControl | formGetValue | isNilOrBlank)"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-form-field>
+
+  <!-- double -->
+  <mat-form-field
+    *ngSwitchCase="'double'"
+    [floatLabel]="floatLabel | asFloatLabelType"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [class]="classList"
+  >
+    @if (placeholder && floatLabel !== 'never') {
+      <mat-label>{{ placeholder }}</mat-label>
+    }
+
+    <input
+      matInput
+      #matInput
+      type="number"
+      decimal="true"
+      autocomplete="off"
+      [min]="definition.minValue"
+      [max]="definition.maxValue"
+      [appAutofocus]="autofocus"
+      [readonly]="readonly"
+      [placeholder]="floatLabel === 'never' ? placeholder : null"
+      [step]="numberInputStep"
+      (keyup.enter)="onKeyupEnter.emit($event)"
+      (keypress)="filterNumberInput($event, true)"
+      [formControl]="formControl"
+      [required]="required"
+      [tabIndex]="tabindex"
+      (click)="selectInputContentFromEvent($event)"
+    />
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+    <mat-error *ngIf="formControl.hasError('decimal')" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>
+    <mat-error *ngIf="formControl.hasError('min')">
+      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}
+    </mat-error>
+    <mat-error *ngIf="formControl.hasError('max')">
+      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}
+    </mat-error>
+    <mat-error *ngIf="formControl.hasError('maxDecimals')">
+      {{
+        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')
+          | translate: { maxDecimals: definition.maximumNumberDecimals }
+      }}
+    </mat-error>
+
+    <button
+      matSuffix
+      *ngIf="clearable"
+      mat-icon-button
+      tabindex="-1"
+      type="button"
+      (click)="formControl.reset()"
+      [hidden]="formControl.disabled || (formControl | formGetValue | isNilOrBlank)"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-form-field>
+
+  <!-- boolean -->
+  <mat-boolean-field
+    *ngSwitchCase="'boolean'"
+    #matInput
+    [class]="classList"
+    [formControl]="formControl"
+    [placeholder]="placeholder"
+    [floatLabel]="floatLabel"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [required]="required"
+    [compact]="compact"
+    [tabindex]="tabindex"
+    [readonly]="readonly"
+  >
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-boolean-field>
+
+  <!-- date -->
+  <mat-date-field
+    *ngSwitchCase="'date'"
+    #matInput
+    [class]="classList"
+    [formControl]="formControl"
+    [placeholder]="compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder"
+    [floatLabel]="floatLabel"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [required]="required"
+    [clearable]="clearable"
+    [readonly]="readonly"
+    [compact]="compact"
+    [tabindex]="tabindex"
+    [autofocus]="autofocus"
+  >
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-date-field>
+
+  <!-- date time -->
+  <mat-date-time-field
+    *ngSwitchCase="'dateTime'"
+    #matInput
+    [class]="classList"
+    [formControl]="formControl"
+    [placeholder]="compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder"
+    [floatLabel]="floatLabel"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [required]="required"
+    [clearable]="clearable"
+    [readonly]="readonly"
+    [compact]="compact"
+    [tabindex]="tabindex"
+    [autofocus]="autofocus"
+  >
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-date-time-field>
+
+  <!-- enum -->
+  <mat-form-field
+    *ngSwitchCase="'enum'"
+    [floatLabel]="floatLabel | asFloatLabelType"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [class]="classList"
+    [class.mat-form-field-disabled]="readonly"
+  >
+    @if (placeholder && floatLabel !== 'never') {
+      <mat-label>{{ placeholder }}</mat-label>
+    }
+    @if (readonly) {
+      <input matInput hidden type="text" readonly="true" [formControl]="formControl" />
+      <ion-text>{{ formControl.value }}</ion-text>
+    } @else {
+      <mat-select
+        [formControl]="formControl"
+        [placeholder]="floatLabel === 'never' ? placeholder : null"
+        [required]="required"
+        [tabindex]="tabindex"
+        (keyup.enter)="onKeyupEnter.emit($event)"
+      >
+        <mat-option *ngFor="let item of _values" [value]="item.key">{{ item.value | translate }}</mat-option>
+      </mat-select>
+    }
+
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+  </mat-form-field>
+
+  <!-- multi enum -->
+  <mat-chips-field
+    *ngSwitchCase="'enums'"
+    [class]="classList"
+    [placeholder]="placeholder"
+    [floatLabel]="floatLabel"
+    [appearance]="appearance"
+    [formControl]="formControl"
+    [clearable]="clearable"
+    [items]="_values"
+    [displayAttributes]="definition.autocomplete?.attributes || ['key', 'value']"
+    [config]="definition.autocomplete"
+    [showAllOnFocus]="true"
+    [required]="required"
+    [readonly]="readonly"
+    [chipColor]="chipColor | matColor"
+  >
+    <ng-content select="[matPrefix]"></ng-content>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-chips-field>
+
+  <!-- color -->
+  <mat-form-field
+    *ngSwitchCase="'color'"
+    [floatLabel]="floatLabel | asFloatLabelType"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [class]="classList"
+  >
+    <ion-icon margin-right name="color-fill" matPrefix></ion-icon>
+
+    <input
+      matInput
+      autocomplete="off"
+      [appAutofocus]="autofocus"
+      [formControl]="formControl"
+      [style.color]="getColorContrast(formControl.value)"
+      [style.background]="formControl.value"
+      [colorPicker]="formControl.value"
+      (colorPickerChange)="writeValue($event)"
+      [cpSaveClickOutside]="true"
+      cpPosition="top"
+      cpOutputFormat="hex"
+      [cpOKButton]="false"
+      [required]="required"
+      [readonly]="readonly"
+    />
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+  </mat-form-field>
+
+  <!-- string -->
+  <mat-form-field
+    *ngSwitchCase="'string'"
+    [floatLabel]="floatLabel | asFloatLabelType"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [class]="classList"
+  >
+    @if (placeholder && floatLabel !== 'never') {
+      <mat-label>{{ placeholder }}</mat-label>
+    }
+    <input
+      matInput
+      #matInput
+      autocomplete="off"
+      [appAutofocus]="autofocus"
+      [formControl]="formControl"
+      [placeholder]="floatLabel === 'never' ? placeholder : null"
+      [required]="required"
+      [readonly]="readonly"
+      [tabIndex]="tabindex"
+      (click)="selectInputContentFromEvent($event)"
+      (keyup.enter)="onKeyupEnter.emit($event)"
+      (keypress)="filterAlphanumericalInput($event)"
+    />
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+
+    <button
+      matSuffix
+      *ngIf="clearable"
+      mat-icon-button
+      tabindex="-1"
+      type="button"
+      (click)="formControl.reset()"
+      [hidden]="formControl.disabled || (formControl | formGetValue | isNilOrBlank)"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-form-field>
+
+  <!-- auto-complete -->
+  <mat-autocomplete-field
+    *ngSwitchCase="'entity'"
+    #autocompleteField
+    [class]="classList"
+    [autofocus]="autofocus"
+    [placeholder]="placeholder"
+    [floatLabel]="floatLabel"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [formControl]="formControl"
+    [config]="definition.autocomplete"
+    [required]="required"
+    [hideRequiredMarker]="hideRequiredMarker"
+    [tabindex]="tabindex"
+    [clearable]="clearable"
+    [readonly]="readonly"
+    (keyup.enter)="onKeyupEnter.emit($event)"
+    [displayWith]="getDisplayValueFn(definition)"
+    [panelClass]="panelClass"
+    [panelWidth]="panelWidth"
+  >
+    <ng-content select="[matPrefix]"></ng-content>
+    <ng-content select="[matSuffix]"></ng-content>
+  </mat-autocomplete-field>
+
+  <!-- multi auto-complete -->
+  <mat-chips-field
+    *ngSwitchCase="'entities'"
+    [class]="classList"
+    [placeholder]="placeholder"
+    [floatLabel]="floatLabel"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    [formControl]="formControl"
+    [config]="definition.autocomplete"
+    [required]="required"
+    [chipColor]="chipColor | matColor"
+    [clearable]="clearable"
+    [displayWith]="getDisplayValueFn(definition)"
+    [readonly]="readonly"
+    [panelClass]="panelClass"
+    [panelWidth]="panelWidth"
+  >
+    <ng-content select="[matPrefix]"></ng-content>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-chips-field>
+
+  <!-- other -->
+  <div *ngSwitchDefault>
+    <mat-error *ngIf="type">
+      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.
+    </mat-error>
+    <mat-error *ngIf="!type">Error on option field. Please check console log for details.</mat-error>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </div>
+</ng-container>

package/src/app/shared/form/field.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+button[hidden] {
+  display: none;
+}