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

package/src/app/shared/debug/debug.module.ts

@@ -1,28 +0,0 @@
-import {NgModule} from '@angular/core';
-import {DebugComponent} from './debug.component';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {TranslateModule} from '@ngx-translate/core';
-import {CommonModule} from '@angular/common';
-import {IonicModule} from '@ionic/angular';
-import {MatIcon, MatIconModule} from '@angular/material/icon';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    MatExpansionModule,
-    MatIconModule,
-    TranslateModule.forChild(),
-    MatExpansionModule
-  ],
-  declarations: [
-    DebugComponent
-  ],
-  exports: [
-    DebugComponent,
-    TranslateModule
-  ]
-})
-export class SharedDebugModule {
-
-}

package/src/app/shared/directives/autofocus.directive.ts

@@ -1,109 +0,0 @@
-// Import the core angular services.
-import {AfterContentInit, Directive, ElementRef, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
-import {isMobile} from '../platforms';
-import {Subscription, timer} from 'rxjs';
-import {KeyboardService} from '../capacitor/keyboard';
-
-// ----------------------------------------------------------------------------------- //
-// ----------------------------------------------------------------------------------- //
-
-const BASE_TIMER_DELAY = 100;
-
-@Directive({
-  selector: '[autofocus], input[appAutofocus]',
-  inputs: [
-    'shouldFocusElement: appAutofocus',
-    'timerDelay: autofocusDelay'
-  ]
-})
-export class AutofocusDirective implements AfterContentInit, OnChanges, OnDestroy {
-
-  public shouldFocusElement: any;
-  public timerDelay: number;
-
-  private readonly _mobile: boolean;
-  private _timer: Subscription = null;
-
-  // I initialize the autofocus directive.
-  constructor(
-    private readonly _elementRef: ElementRef,
-    private readonly keyboard: KeyboardService) {
-
-    this.shouldFocusElement = '';
-    this._timer = null;
-    this.timerDelay = BASE_TIMER_DELAY;
-    this._mobile = isMobile(window);
-  }
-
-  // I get called once after the contents have been fully initialized.
-  ngAfterContentInit() {
-
-    // Because this directive can act on the stand-only "autofocus" attribute or
-    // the more specialized "appAutofocus" property, we need to check to see if the
-    // "shouldFocusElement" input property is the empty string. This will signify
-    // that the focus it not being data-driven and should be performed automatically.
-    if ( this.shouldFocusElement === '') {
-      this._startFocus();
-    }
-  }
-
-  // I get called every time the input bindings are updated.
-  ngOnChanges( changes: SimpleChanges ) {
-
-    // If the timer delay is being passed-in as a string (ie, someone is using
-    // attribute-input syntax, not property-input syntax), let's coalesce the
-    // attribute to a numeric value so that our type-annotations are consistent.
-    if ( (changes.autofocusDelay || changes.timerDelay) && ( typeof( this.timerDelay ) !== 'number' ) ) {
-
-      // If the coalesce fails, just fall-back to a sane value.
-      if ( isNaN( this.timerDelay = +this.timerDelay ) ) {
-        this.timerDelay = BASE_TIMER_DELAY;
-      }
-    }
-
-    // If the focus input is being data-driven, then we either need to start the
-    // focus workflow if focus is required; or, clear any existing workflow if focus
-    // is no longer required (so that we don't steal focus from another element).
-    if ( changes.appAutofocus || changes.shouldFocusElement ) {
-
-      ( this.shouldFocusElement )
-        ? this._startFocus()
-        : this._stop()
-      ;
-    }
-  }
-
-  // I get called once when the directive is being unmounted.
-  ngOnDestroy() {
-    this._stop();
-  }
-
-  /* --- private functions -- */
-
-  // I start the timer-based workflow that will focus the current element.
-  private _startFocus() {
-
-    // Skip focus when keyboard is visible
-    if (this.keyboard.visible) return;
-
-    // If there is already a timer running for this element, just let it play out -
-    // resetting it at this point will only push-out the time at which the focus is
-    // applied to the element.
-    if ( this._timer )  return;
-
-    this._timer = timer(this.timerDelay)
-      .subscribe(() => {
-        if (this._timer) {
-          this._stop();
-          this._elementRef.nativeElement.focus();
-        }
-      });
-  }
-
-  // I stop the timer-based workflow, preventing focus from taking place.
-  private _stop() {
-    this._timer?.unsubscribe();
-    this._timer = null;
-  }
-
-}

package/src/app/shared/directives/autotitle.directive.ts

@@ -1,24 +0,0 @@
-import { AfterContentChecked, Directive, ElementRef, Inject } from '@angular/core';
-
-const compatibleTagNames = ['ion-label', 'mat-label'];
-
-@Directive({
-  selector: '[appAutoTitle]',
-})
-export class AutoTitleDirective implements AfterContentChecked {
-  private readonly element: HTMLElement;
-
-  constructor(@Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>) {
-    // Check compatible tag
-    if (compatibleTagNames.includes(elementRef.nativeElement.tagName?.toLowerCase())) {
-      this.element = elementRef.nativeElement;
-    }
-  }
-
-  ngAfterContentChecked(): void {
-    // Update title if different
-    if (this.element && this.element.title !== this.element.textContent) {
-      this.element.title = this.element.textContent;
-    }
-  }
-}

package/src/app/shared/directives/directives.module.ts

@@ -1,29 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {IonicModule} from '@ionic/angular';
-import {AutofocusDirective} from './autofocus.directive';
-import {NgVarDirective} from './ng-var.directive';
-import {DragAndDropDirective} from './drag-and-drop.directive';
-import {AutoTitleDirective} from './autotitle.directive';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule
-  ],
-  declarations: [
-    AutofocusDirective,
-    NgVarDirective,
-    DragAndDropDirective,
-    AutoTitleDirective
-  ],
-  exports: [
-    AutofocusDirective,
-    NgVarDirective,
-    DragAndDropDirective,
-    AutoTitleDirective
-  ]
-})
-export class SharedDirectivesModule {
-}

package/src/app/shared/directives/drag-and-drop.directive.ts

@@ -1,47 +0,0 @@
-import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
-import {isNotEmptyArray} from '../functions';
-
-interface DropEvent extends Event {
-  dataTransfer?: {
-    files?: File[]
-  }
-}
-
-@Directive({
-  selector: '[appDragAndDrop]',
-})
-export class DragAndDropDirective {
-
-  @HostBinding('class.fileover') fileOver: boolean;
-
-  @Output() fileDropped = new EventEmitter<File[]>();
-
-  // Dragover listener
-  @HostListener('dragover', ['$event'])
-  onDragOver(event: Event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.fileOver = true;
-  }
-
-  // Dragleave listener
-  @HostListener('dragleave', ['$event'])
-  public onDragLeave(event: Event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.fileOver = false;
-  }
-
-  // Drop listener
-  @HostListener('drop', ['$event'])
-  public ondrop(event: DropEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.fileOver = false;
-    const files = event.dataTransfer?.files;
-
-    if (isNotEmptyArray(files)) {
-      this.fileDropped.emit(files);
-    }
-  }
-}

package/src/app/shared/directives/ng-var.directive.ts

@@ -1,32 +0,0 @@
-import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
-
-@Directive({
-  selector: '[ngVar]',
-})
-export class NgVarDirective {
-
-  @Input()
-  set ngVar(context: unknown) {
-    this.context.$implicit = this.context.ngVar = context;
-
-    if (!this.hasView) {
-      this.vcRef.createEmbeddedView(this.templateRef, this.context);
-      this.hasView = true;
-    }
-  }
-
-  private context: {
-    $implicit: unknown;
-    ngVar: unknown;
-  } = {
-    $implicit: null,
-    ngVar: null,
-  };
-
-  private hasView: boolean = false;
-
-  constructor(
-    private templateRef: TemplateRef<any>,
-    private vcRef: ViewContainerRef
-  ) {}
-}

package/src/app/shared/directives/resizable/resizable.component.ts

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, HostBinding, Input, Optional, Output } from '@angular/core';
-import { MatColumnDef } from '@angular/material/table';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'th[resizable]',
-  templateUrl: './resizable.template.html',
-  styleUrls: ['./resizable.style.scss'],
-})
-export class ResizableComponent {
-  @Input() resizable: boolean;
-  @Output() sizeChanged = new EventEmitter<number>();
-
-  @HostBinding('style.width')
-  width: string | null = null;
-
-  @HostBinding('style.min-width')
-  minWidth: string | null = null;
-
-  @HostBinding('style.max-width')
-  maxWidth: string | null = null;
-
-  private debug = false;
-
-  constructor(@Optional() public readonly columnDef: MatColumnDef) {}
-
-  onResize(width: number, opts?: { emitEvent: boolean }) {
-    if (!this.resizable) return;
-    if (this.debug) console.info(`resize:${width}`);
-    this.minWidth = width + 'px';
-    this.maxWidth = width + 'px';
-    if (!opts || opts.emitEvent) {
-      this.sizeChanged.emit(width);
-    }
-  }
-
-  onFit(opts?: { emitEvent: boolean }) {
-    if (!this.resizable) return;
-    if (this.debug) console.info('fit');
-    this.width = 'auto';
-    this.minWidth = null;
-    this.maxWidth = null;
-    if (!opts || opts.emitEvent) {
-      this.sizeChanged.emit(undefined);
-    }
-  }
-}

package/src/app/shared/directives/resizable/resizable.directive.ts

@@ -1,43 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { Directive, ElementRef, Inject, Output } from '@angular/core';
-import { bufferWhen, distinctUntilChanged, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
-import {fromEvent, interval, Observable} from 'rxjs';
-
-@Directive({
-  selector: '[resizable]',
-})
-export class ResizableDirective {
-
-  @Output()
-  readonly resizable: Observable<number>;
-
-  // fit: doubleclick
-  @Output()
-  readonly fit: Observable<MouseEvent[]>
-
-  constructor(@Inject(DOCUMENT) private readonly document: any,
-              @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>) {
-
-    // resize: mousedown -> mousemove -> mouseup
-    this.resizable = fromEvent<MouseEvent>(this.elementRef.nativeElement, 'mousedown').pipe(
-      tap((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }),
-      switchMap(() => {
-        const { width, right } = this.elementRef.nativeElement.closest('th').getBoundingClientRect();
-        return fromEvent<MouseEvent>(this.document, 'mousemove').pipe(
-          map(({ clientX }) => width + clientX - right),
-          distinctUntilChanged(),
-          takeUntil(fromEvent(this.document, 'mouseup'))
-        );
-      })
-    );
-
-    // fit: doubleclick
-    this.fit = fromEvent<MouseEvent>(this.elementRef.nativeElement, 'click').pipe(
-      bufferWhen(() => interval(500)),
-      filter((ar) => ar.length === 2)
-    );
-  }
-}

package/src/app/shared/directives/resizable/resizable.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ResizableComponent } from './resizable.component';
-import { ResizableDirective } from './resizable.directive';
-
-@NgModule({
-  declarations: [ResizableComponent, ResizableDirective],
-  exports: [ResizableComponent, ResizableDirective],
-})
-export class ResizableModule {}

package/src/app/shared/directives/resizable/resizable.style.scss

@@ -1,44 +0,0 @@
-:host {
-  &:last-child .bar {
-    display: none;
-  }
-}
-
-.wrapper {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.content {
-  flex: 1;
-}
-
-.bar {
-  // absolute
-  //position: absolute;
-  //top: 0;
-  //bottom: 0;
-
-  // or relative
-  height: var(--app-table-header-height, 55px);
-
-  width: 10px;
-  justify-self: flex-end;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  background: var(--ion-color-secondary);
-  background-clip: content-box;
-  cursor: ew-resize;
-  opacity: 0;
-  transition: opacity 0.3s;
-
-  &:hover,
-  &:active {
-    opacity: 1;
-  }
-}
-
-:host-context(.mat-table-sticky) .bar {
-  width: 12px !important;
-}

package/src/app/shared/directives/resizable/resizable.template.html

@@ -1,6 +0,0 @@
-<div class="wrapper">
-  <div class="content">
-    <ng-content></ng-content>
-  </div>
-  <div class="bar" [class.cdk-visually-hidden]="!resizable" (resizable)="onResize($event)" (fit)="onFit()"></div>
-</div>

package/src/app/shared/events.ts

@@ -1,96 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { fromEvent, merge, Observable, timer } from 'rxjs';
-import { filter } from 'rxjs/operators';
-
-export interface PromiseEventPayload<R = any> {
-  success: (value?: R) => void;
-  error: (reason?: any) => void;
-}
-
-export type PromiseEvent<R = any, D = void> = CustomEvent<PromiseEventPayload<R> & D>;
-
-export function createPromiseEventEmitter<R = any, D = void>(): EventEmitter<PromiseEvent<R, D>> {
-  return new EventEmitter<PromiseEvent<R, D>>(true);
-}
-
-export function createPromiseEvent<T = void, D = void>(eventType: string,
-                                                      promise: PromiseEventPayload<T>,
-                                                      initArg?: CustomEventInit<D>
-  ): PromiseEvent<T, D> {
-
-  const detail = <PromiseEventPayload & D>{
-    ...(initArg?.detail || {}),
-    ...promise
-  };
-  return new CustomEvent<PromiseEventPayload<T> & D>(eventType, {detail});
-}
-
-export function emitPromiseEvent<T = any, D = void>(emitter: EventEmitter<PromiseEvent<T, D>>,
-                                                   eventType: string,
-                                                   initArg?: CustomEventInit<D>): Promise<T> {
-  return new Promise<T>((resolve, reject) => {
-    const event = createPromiseEvent(eventType, {
-      success: resolve,
-      error: reject
-    }, initArg);
-    emitter.emit(event);
-  });
-}
-
-export interface CompletableEvent extends Event {
-  target: EventTarget & { complete?: () => void };
-}
-
-/**
- * Listen end of scroll.
- * <p>
- *   The threshold distance from the bottom of the content to call the infinite output event when scrolled.
- *   The threshold value can be either a percent, or in pixels.
- *   For example, use the value of 10% for the infinite output event to get called when the user has scrolled
- *   10% from the bottom of the page. Use the value 100px when the scroll is within 100 pixels from the bottom of the page.
- * </p>
- * @param element
- * @param threshold default to '15%'
- */
-export function fromScrollEndEvent(element: HTMLElement, threshold?: string, dueTime?: number): Observable<any> {
-
-  threshold = threshold || '15%';
-  let isEnd: () => boolean;
-
-  // Listen using percentage
-  if (threshold.endsWith('%')) {
-    const thresholdRatio = parseInt(threshold.slice(0, threshold.length - 1)) / 100;
-    isEnd = () => {
-      const endPosRatio = 1 - (element.scrollTop + element.offsetHeight) / element.scrollHeight;
-      return endPosRatio < thresholdRatio;
-    };
-  }
-
-  // Listen using pixels
-  else if (threshold.endsWith('px')) {
-    const thresholdPx = parseInt(threshold.slice(0, threshold.length - 2));
-    isEnd = () => {
-      const endPosPx = element.scrollHeight - (element.scrollTop + element.offsetHeight);
-      return endPosPx < thresholdPx;
-    };
-  }
-  else {
-    throw new Error('Invalid argument \'threshold\'. Expected value unit: \'px\' or \'%\' ')
-  }
-
-  // Check bottom reach, even if NO scroll event (e.g. when already reach the bottom)
-  if (dueTime > 0) {
-    return merge(
-      fromEvent(element, 'scroll'),
-      timer(dueTime)
-    )
-      .pipe(
-        filter(() => isEnd())
-      );
-  }
-
-  return fromEvent(element, 'scroll')
-    .pipe(
-      filter(() => isEnd())
-    );
-}

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

@@ -1,94 +0,0 @@
-import {Observable} from 'rxjs';
-import {filter, map} from 'rxjs/operators';
-import {HttpEventType} from '@angular/common/http';
-import {FileEvent, FileResponse} from '../upload-file/upload-file.model';
-import {FilesUtils} from './file.utils';
-import {isNotNil} from '../functions';
-
-//@dynamic
-export class CsvUtils {
-
-  static exportToFile(rows: object[],
-                      opts?: {
-                        filename?: string;
-                        headers?: string[];
-                        separator?: string;
-                        encoding?: string;
-                        type?: string;
-                      }) {
-    if (!rows || !rows.length) return; // Skip if empty
-
-    // Create text content
-    const separator = opts?.separator || ',';
-    const protectCellRegexp = new RegExp("/(\"|"+ separator +"|\n)/g");
-    const keys = Object.keys(rows[0]);
-    const headers = opts?.headers || keys;
-    const textContent =
-      // Header row
-      headers.join(separator) + '\n' +
-      // Data rows
-      rows.map(row => {
-        return keys.map(k => {
-          const cell = row[k] === null || row[k] === undefined ? '' : row[k];
-          let cellStr: string = cell instanceof Date
-            ? cell.toLocaleString()
-            : cell.toString().replace(/"/g, '""');
-          if (protectCellRegexp.test(cellStr)) {
-            cellStr = `"${cellStr}"`;
-          }
-          return cellStr;
-        }).join(separator);
-      }).join('\n');
-
-    // Write to file
-    FilesUtils.writeTextToFile(
-      textContent, {
-        type: 'text/csv',
-        filename: 'export.csv',
-        ...opts,
-      }
-    );
-  }
-
-  static parseFile(file: File, opts?: {separator?: string; encoding?: string;}): Observable<FileEvent<string[][]>> {
-    return FilesUtils.readAsText(file, opts?.encoding)
-      .pipe(
-        map(e => {
-          if (e.type === HttpEventType.UploadProgress) {
-            const loaded = Math.round(e.loaded * 0.8);
-            return {...e, loaded};
-          }
-          else if (e instanceof FileResponse){
-            const body = e.body;
-            const data = CsvUtils.parseCSV(body, opts);
-            return new FileResponse<string[][]>({body: data});
-          }
-        }),
-        filter(isNotNil)
-      );
-  }
-
-  static parseCSV(body: string, opts?: {separator?: string; skipEmptyLine?: boolean}): string[][] {
-    const separator = opts?.separator || ',';
-    const skipEmptyLine = !opts || opts.skipEmptyLine !== false;
-
-    // Protect special characters (quote and /n)
-    body = body.replace('""', '<quote>') // Protect double quote
-      .replace(/("[^\n"]+)\n\r?/gm, '"$1<br>') // Protect \n inside a quoted expression
-      .replace(/\n\r/gm, '\n') // Windows CR
-
-    const headerAndRows = body.split('\n', 2);
-    const headers = headerAndRows[0].split(separator);
-
-    return body.split('\n') // split into rows
-      .filter(line => !skipEmptyLine || line.trim().length > 0) // Skip empty line
-      .map(line => {
-        const cells = line.split(separator, headers.length) // split into cells
-          .map(cell => cell.replace(/^"([^"]*)"$/, '$1')) // Clean trailing quotes
-          .map(cell => cell.replace('<quote>', '"')) // restore protected quote
-          .map(cell => cell.replace('<br>', '\n')) // restore protected br
-        ;
-        return cells;
-      });
-  }
-}