@sumaris-net/ngx-components 18.12.0 → 18.12.2

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

@@ -1,25 +0,0 @@
-import { Component, Inject, Input, Optional, ViewChild } from '@angular/core';
-import { MatExpansionPanel } from '@angular/material/expansion';
-import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
-
-@Component({
-  selector: 'app-debug',
-  templateUrl: './debug.component.html',
-  styleUrls: ['./debug.component.scss'],
-})
-export class DebugComponent {
-  @Input() titlePrefix = 'COMMON.DEBUG.TITLE';
-  @Input() title = '';
-  @Input() enable: boolean = null;
-  @Input() expanded = false;
-
-  @ViewChild('expansionPanel') expansionPanel: MatExpansionPanel;
-
-  constructor(@Inject(ENVIRONMENT) @Optional() environment: Environment) {
-    this.enable = !environment || !environment.production;
-  }
-
-  toggle() {
-    this.expansionPanel.toggle();
-  }
-}

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

@@ -1,14 +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,93 +0,0 @@
-// Import the core angular services.
-import { AfterContentInit, Directive, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-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 _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;
-  }
-
-  // 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) {
-      if (this.shouldFocusElement) this._startFocus();
-      else 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/autoresize.directive.ts

@@ -1,67 +0,0 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, numberAttribute } from '@angular/core';
-import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-
-@Directive({
-  selector: 'textarea[cdkTextareaAutosize]',
-})
-/**
- * Workaround to avoid CDK directive to scroll to top, when resizing
- */
-export class AutoResizeDirective implements AfterViewInit {
-  private get _cachedLineHeight() {
-    return this.cdkDirective?.['_cachedLineHeight'] || 10;
-  }
-
-  private get _previousValue() {
-    return this.cdkDirective?.['_previousValue'] || '';
-  }
-  private set _previousValue(value: string) {
-    if (this.cdkDirective) {
-      this.cdkDirective['_previousValue'] = value;
-    }
-  }
-
-  @Input({ alias: 'cdkAutosizeMaxRows', transform: numberAttribute })
-  maxRows: number;
-
-  @Input({ alias: 'cdkAutosizeMinRows', transform: numberAttribute })
-  minRows: number;
-
-  constructor(
-    readonly element: ElementRef<HTMLTextAreaElement>,
-    readonly cdkDirective: CdkTextareaAutosize
-  ) {}
-
-  ngAfterViewInit() {}
-
-  @HostListener('input')
-  @HostListener('paste')
-  @HostListener('cut')
-  @HostListener('delete')
-  onInput() {
-    if (this._previousValue !== this.element.nativeElement.value) {
-      // This will avoid CDK directive to trigger
-      this._previousValue = this.element.nativeElement.value;
-      // Resize
-      this.doResize();
-    }
-  }
-
-  private doResize() {
-    const textarea = this.element.nativeElement;
-
-    // Force to recompute the needed height
-    textarea.style.height = 'auto';
-
-    const minHeight = this.minRows ? this.minRows * this._cachedLineHeight : 0;
-    const maxHeight = this.maxRows ? this.maxRows * this._cachedLineHeight : Infinity;
-    const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
-
-    // DEBUG
-    //console.debug(`[autoResizeTextarea] Resizing textarea to ${newHeight}px`);
-
-    textarea.style.height = `${newHeight}px`;
-
-    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
-  }
-}

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

@@ -1,17 +0,0 @@
-import { AfterContentChecked, booleanAttribute, Directive, ElementRef, Inject, Input } from '@angular/core';
-
-@Directive({
-  selector: 'ion-label[appAutoTitle], mat-label[appAutoTitle]',
-})
-export class AutoTitleDirective implements AfterContentChecked {
-  @Input({ transform: booleanAttribute }) appAutoTitle = true;
-
-  constructor(@Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>) {}
-
-  ngAfterContentChecked(): void {
-    // Update title if different
-    if (this.elementRef.nativeElement && this.elementRef.nativeElement.title !== this.elementRef.nativeElement.textContent) {
-      this.elementRef.nativeElement.title = this.elementRef.nativeElement.textContent;
-    }
-  }
-}

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

@@ -1,16 +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';
-import { ThrottledClickDirective } from './throttled-click.directive';
-import { AutoResizeDirective } from './autoresize.directive';
-
-@NgModule({
-  imports: [CommonModule, IonicModule],
-  declarations: [AutofocusDirective, NgVarDirective, DragAndDropDirective, AutoTitleDirective, ThrottledClickDirective, AutoResizeDirective],
-  exports: [AutofocusDirective, NgVarDirective, DragAndDropDirective, AutoTitleDirective, ThrottledClickDirective, AutoResizeDirective],
-})
-export class SharedDirectivesModule {}

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

@@ -1,46 +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,31 +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 = false;
-
-  constructor(
-    private templateRef: TemplateRef<any>,
-    private vcRef: ViewContainerRef
-  ) {}
-}

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

@@ -1,48 +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.width = width + 'px';
-    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,37 +0,0 @@
-:host {
-  &:last-child .bar {
-    display: none;
-  }
-}
-
-.wrapper {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.content {
-  flex: 1;
-}
-
-.bar {
-  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/directives/throttled-click.directive.ts

@@ -1,36 +0,0 @@
-import { Directive, EventEmitter, HostListener, Input, numberAttribute, OnDestroy, OnInit, Output } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
-import { throttleTime } from 'rxjs/operators';
-
-@Directive({
-  selector: '[appPreventDoubleClick],[throttledClick]',
-})
-export class ThrottledClickDirective implements OnInit, OnDestroy {
-  @Input({ transform: numberAttribute }) throttleTime = 500;
-
-  @Output() throttledClick = new EventEmitter<UIEvent>();
-
-  private clicks = new Subject<UIEvent>();
-  private subscription: Subscription;
-
-  constructor() {}
-
-  @HostListener('click', ['$event'])
-  clickEvent(event: UIEvent) {
-    if (event.defaultPrevented) return;
-    event.stopPropagation();
-    this.clicks.next(event);
-  }
-
-  ngOnInit() {
-    this.subscription = this.clicks.pipe(throttleTime(this.throttleTime)).subscribe((e) => this.emitThrottledClick(e));
-  }
-
-  emitThrottledClick(e: UIEvent) {
-    this.throttledClick.emit(e);
-  }
-
-  ngOnDestroy() {
-    this.subscription?.unsubscribe();
-  }
-}

package/src/app/shared/events.ts

@@ -1,93 +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<R = any, D = void>(
-  emitter: EventEmitter<PromiseEvent<R, D>>,
-  eventType: string,
-  initArg?: CustomEventInit<D>
-): Promise<R> {
-  return new Promise<R>((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%'
- * @param dueTime
- */
-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()));
-}