@sumaris-net/ngx-components 18.12.0 → 18.12.2

package/src/app/shared/material/memory/memory.utils.ts

@@ -1,57 +0,0 @@
-import { ElementRef, EventEmitter } from '@angular/core';
-import { Subject } from 'rxjs';
-
-export class MemoryUtils {
-  static cleanup(
-    object: any,
-    opts?: {
-      path?: string;
-      depth?: number;
-      debug?: boolean;
-    }
-  ) {
-    if (!object || (opts && opts.depth >= 5)) return;
-
-    if (object instanceof ElementRef) {
-      if (opts && opts.debug) console.debug('Force closing event emitter: ' + (opts && opts.path));
-      object.nativeElement.remove();
-      return;
-    }
-
-    if (object instanceof EventEmitter && !object.closed) {
-      if (opts && opts.debug) console.debug('Force closing event emitter: ' + (opts && opts.path));
-      object.complete();
-      return;
-    }
-    if (object instanceof Subject && !object.closed) {
-      if (opts && opts.debug) console.debug('Force closing subject: ' + (opts && opts.path));
-      object.complete();
-      return;
-    }
-
-    //if (opts && opts.debug && opts.path) console.debug("Looking for unclosed observables at " + (opts && opts.path) );
-
-    Object.keys(object).forEach((key) => {
-      if (
-        key.startsWith('parent') ||
-        key.startsWith('_parent') ||
-        key.startsWith('_ngZone') ||
-        key.startsWith('__ngContext') ||
-        key.startsWith('_changeDetectorRef') ||
-        key.startsWith('ngControl')
-      ) {
-        //object[key] = null;
-        return;
-      } // Skip
-
-      if (key.startsWith('trigger') || key.startsWith('value')) {
-        // Recursive call
-        MemoryUtils.cleanup(object[key], {
-          ...opts,
-          path: ((opts && opts.path) || '') + '/' + key,
-          depth: ((opts && opts.depth) || 0) + 1,
-        });
-      }
-    });
-  }
-}

package/src/app/shared/material/numpad/numpad.animation.ts

@@ -1 +0,0 @@
-// import the required animation functions from the angular animations module

package/src/app/shared/material/numpad/numpad.append-to-input.directive.ts

@@ -1,110 +0,0 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
-
-type TimepickerDirectionY = 'top' | 'center' | 'bottom';
-type TimepickerDirectionX = 'start' | 'center' | 'end';
-
-@Directive({
-  selector: '[appendNumpadToInput]',
-})
-export class AppendToInputDirective implements AfterViewInit {
-  @Input('appendNumpadToInput') inputElement: any;
-
-  private _directionY: TimepickerDirectionY;
-  private _directionX: TimepickerDirectionX;
-  private _inputCords: ClientRect;
-  private readonly element: HTMLElement;
-
-  constructor(
-    elementRef: ElementRef<HTMLElement>,
-    private renderer: Renderer2
-  ) {
-    this.element = elementRef.nativeElement;
-  }
-
-  private get inputCords(): ClientRect {
-    return this.inputElement.getBoundingClientRect();
-  }
-
-  private get directionY(): TimepickerDirectionY {
-    const height = this.element.offsetHeight;
-    const { bottom, top } = this._inputCords;
-    const isElementFit = (window && window.innerHeight) - bottom < height;
-    const isTop = isElementFit && top > height;
-    const isCenter = isElementFit && top < height;
-
-    if (isTop) {
-      return 'top';
-    } else if (isCenter) {
-      return 'center';
-    }
-    return 'bottom';
-  }
-
-  private get directionX(): TimepickerDirectionX {
-    const width = this.element.offsetWidth;
-    const { left, right } = this._inputCords;
-    const isElementFit = (window && window.innerWidth) - left < width;
-    const isEnd = isElementFit && right > width;
-    const isCenter = isElementFit && right < width;
-
-    if (isEnd) {
-      return 'end';
-    } else if (isCenter) {
-      return 'center';
-    }
-    return 'start';
-  }
-
-  ngAfterViewInit(): void {
-    this._inputCords = this.inputCords;
-    this._directionY = this.directionY;
-    this._directionX = this.directionX;
-
-    this.append();
-  }
-
-  @HostListener('window:scroll')
-  changePosition(): void {
-    const { left, right, bottom, top } = this.inputCords;
-    const x = this.defineElementYByDirection(left, right);
-    const y = this.defineElementYByDirection(top, bottom);
-    this.setStyle('left', `${x}px`);
-    this.setStyle('top', `${y}px`);
-  }
-
-  private append(): void {
-    const { left, right, bottom, top } = this._inputCords;
-
-    const x = this.defineElementXByDirection(left, right);
-    const y = this.defineElementYByDirection(top, bottom);
-
-    this.setStyle('position', 'fixed');
-    this.setStyle('left', `${x}px`);
-    this.setStyle('top', `${y}px`);
-  }
-
-  private setStyle(style: string, value: string): void {
-    this.renderer.setStyle(this.element, style, value);
-  }
-
-  private defineElementYByDirection(inputTop: number, inputBottom: number): number {
-    if (this._directionY === 'top') {
-      return inputTop - this.element.offsetHeight;
-    } else if (this._directionY === 'center') {
-      return inputTop - this.element.offsetHeight / 2;
-    }
-    return inputBottom;
-  }
-
-  private defineElementXByDirection(inputLeft: number, inputRight: number) {
-    // DEBUG
-    //console.log("defineElementXByDirection ", inputLeft, inputRight);
-
-    if (this._directionX === 'end') {
-      return inputRight - this.element.offsetWidth;
-    } else if (this._directionX === 'center') {
-      return inputRight - this.element.offsetWidth / 2;
-    }
-    return inputLeft;
-  }
-}

package/src/app/shared/material/numpad/numpad.component.ts

@@ -1,73 +0,0 @@
-import { DEFAULT_KEYMAP, MatNumpadKeymap, MatNumpadRef } from './numpad.model';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { NumpadDirective } from './numpad.directive';
-import { MatNumpadContainerComponent } from './numpad.container';
-import { MatNumpadDomService } from './numpad.dom-service';
-
-@Component({
-  selector: 'mat-numpad',
-  template: '',
-})
-export class MatNumpadComponent implements MatNumpadRef {
-  private _inputRef: NumpadDirective;
-  private _opened = false;
-
-  @Input() keymap: MatNumpadKeymap = DEFAULT_KEYMAP;
-
-  @Input() decimal = true;
-
-  @Input() appendToInput: boolean;
-  @Input() disableAnimation = false;
-  @Input() noBackdrop = false;
-  @Input() position = 'bottom';
-
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() keypress = new EventEmitter<KeyboardEvent>();
-  @Output() closed = new EventEmitter<void>();
-
-  get opened(): boolean {
-    return this._opened;
-  }
-
-  get inputElement(): any {
-    return this._inputRef && this._inputRef.element;
-  }
-
-  constructor(private domService: MatNumpadDomService) {}
-
-  registerInput(input: NumpadDirective) {
-    if (this._inputRef) {
-      throw new Error('A Numpad can only be registered to one input.');
-    }
-    this._inputRef = input;
-  }
-
-  open() {
-    // Already open. Skip.
-    if (this._opened) return;
-
-    console.debug('[numpad] Opening numpad...');
-
-    this.domService.appendNumpadToBody(MatNumpadContainerComponent, {
-      numpadRef: this,
-      decimal: this.decimal,
-      keymap: this.keymap,
-      inputElement: this.inputElement,
-      appendToInput: this.appendToInput,
-      disableAnimation: this.disableAnimation,
-      noBackdrop: this.noBackdrop,
-      position: this.position,
-    });
-
-    this._opened = true;
-  }
-
-  close() {
-    console.debug('[numpad] Closing numpad...');
-    this.domService.destroyNumpad();
-    this._opened = false;
-
-    // Emit close event
-    this.closed.next();
-  }
-}

package/src/app/shared/material/numpad/numpad.container.html

@@ -1,37 +0,0 @@
-<div
-  class="numpad-backdrop-overlay"
-  *ngIf="!noBackdrop"
-  (click)="overlayClick($event)"
-  [@numpadBackdrop]="backdropState"
-></div>
-<div class="numpad-overlay">
-  <mat-numpad-content [appendToInput]="appendToInput" [inputElement]="inputElement" cdkTrapFocus>
-    <div
-      class="numpad {{ position }}"
-      [class.panel]="appendToInput"
-      [@numpadPanelExpansion]="panelState"
-      (@numpadPanelExpansion.done)="animationDone($event)"
-      [@numpadFadeIn]="modalState"
-      (@numpadFadeIn.done)="animationDone($event)"
-    >
-      <ion-grid>
-        <ion-row *ngFor="let row of filteredKeymap | async">
-          <ion-col size="{{ 12 / columnCount }}" *ngFor="let item of row">
-            <ion-button
-              mat-button
-              expand="block"
-              *ngIf="item"
-              [color]="item.color || 'secondary'"
-              (click)="onButtonClick($event, item)"
-            >
-              <ion-icon *ngIf="item.icon; else label" slot="icon-only" [name]="item.icon"></ion-icon>
-              <ng-template #label>
-                <ion-label>{{ item.label || item.key | translate }}</ion-label>
-              </ng-template>
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </div>
-  </mat-numpad-content>
-</div>

package/src/app/shared/material/numpad/numpad.container.scss

@@ -1,55 +0,0 @@
-:host {
-  display: inline-block;
-  max-width: 300px;
-  --ion-grid-padding: 0;
-  --ion-grid-column-padding: 0;
-  --background-color: white;
-  --padding: 8px;
-}
-
-.numpad-backdrop-overlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.32);
-  z-index: 1000;
-  pointer-events: auto;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.numpad-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  pointer-events: none;
-}
-
-.numpad {
-  width: 300px;
-  border-radius: 4px;
-  outline: none;
-  position: static;
-  z-index: 1000;
-  pointer-events: auto;
-  background-color: var(--background-color, transparent);
-  padding: var(--padding, 5px);
-
-  box-shadow:
-    rgba(0, 0, 0, 0.25) 0 14px 45px,
-    rgba(0, 0, 0, 0.22) 0 10px 18px;
-
-  &.panel {
-    box-shadow:
-      0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  }
-}

package/src/app/shared/material/numpad/numpad.container.ts

@@ -1,152 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnInit } from '@angular/core';
-import { MatNumpadConfig, MatNumpadEvent, MatNumpadKey, MatNumpadKeymap, MatNumpadRef } from './numpad.model';
-import { BehaviorSubject } from 'rxjs';
-import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-
-export enum AnimationState {
-  ENTER = 'enter',
-  ENTER_INPUT = 'enter-input',
-  LEAVE = 'leave',
-}
-@Component({
-  selector: 'mat-numpad-container',
-  templateUrl: './numpad.container.html',
-  styleUrls: ['./numpad.container.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    // Backdrop animation
-    trigger('numpadBackdrop', [
-      state('*', style({ opacity: 0, background: 'transparent' })),
-      state(AnimationState.ENTER, style({ opacity: 1 })),
-      state(AnimationState.LEAVE, style({ opacity: 0 })),
-      transition(`* => ${AnimationState.ENTER}`, [style({ opacity: 0 }), animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')]),
-      transition(`${AnimationState.ENTER} => ${AnimationState.LEAVE}`, [style({ opacity: 1 }), animate('0.2s cubic-bezier(0.25, 0.8, 0.25, 1)')]),
-    ]),
-
-    // Fade in
-    trigger('numpadFadeIn', [
-      state('*', style({ opacity: 1, transform: 'scale(1)' })),
-      state(AnimationState.ENTER, style({ opacity: 1, transform: 'scale(1)' })),
-      state(AnimationState.LEAVE, style({ opacity: 0, transform: 'scale(0.9)' })),
-      // Modal
-      transition(`* => ${AnimationState.ENTER}`, [style({ opacity: 0, transform: 'scale(0.6)' }), animate('0.2s ease-out')]),
-      transition(`${AnimationState.ENTER} => ${AnimationState.LEAVE}`, [animate('0.2s ease-out')]),
-    ]),
-
-    // Panel expansion
-    trigger('numpadPanelExpansion', [
-      state('*', style({ opacity: 1, transform: 'scaleY(0) translateY(-50%)' })),
-      state(AnimationState.ENTER, style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
-      state(AnimationState.LEAVE, style({ opacity: 0, transform: 'scale(1) translateY(0)' })),
-
-      // Attach to input
-      transition(`* => ${AnimationState.ENTER}`, [animate('0.2s ease-out')]),
-      transition(`${AnimationState.ENTER} => ${AnimationState.LEAVE}`, [animate('0.2s ease-out')]),
-    ]),
-  ],
-})
-export class MatNumpadContainerComponent implements OnInit, MatNumpadConfig {
-  private debug = true;
-
-  backdropState: AnimationState = AnimationState.LEAVE;
-  modalState: AnimationState;
-  panelState: AnimationState;
-  numpadRef: MatNumpadRef;
-  inputElement: any;
-  columnCount = 4;
-
-  filteredKeymap = new BehaviorSubject<MatNumpadKeymap>(undefined);
-
-  // Config options
-  decimal: boolean;
-  disabled: boolean;
-  appendToInput: boolean;
-  keymap: MatNumpadKeymap;
-  disableAnimation: boolean;
-  noBackdrop: boolean;
-  position: string;
-
-  constructor(protected cd: ChangeDetectorRef) {
-    if (this.debug) console.debug('[numpad-container] Creating component');
-  }
-
-  ngOnInit(): void {
-    if (!this.keymap || !this.keymap.length) {
-      throw new Error("An invalid 'keymap' was sent to numpad container");
-    }
-
-    if (!this.disableAnimation) {
-      if (this.appendToInput) {
-        this.panelState = AnimationState.ENTER;
-      } else {
-        this.modalState = AnimationState.ENTER;
-      }
-    }
-
-    this.noBackdrop = this.noBackdrop || this.appendToInput;
-    if (!this.noBackdrop) {
-      this.backdropState = AnimationState.ENTER;
-    }
-
-    const keymap = this.defineFilteredKeymap();
-    this.filteredKeymap.next(keymap);
-
-    // Count columns
-    this.columnCount = keymap.reduce((res, row) => row && Math.max(res, row.length), 0);
-    if (this.debug) console.debug('[numpad-container] columnCount=' + this.columnCount);
-
-    //this.markForCheck();
-  }
-
-  onButtonClick(event: Event, keyDef: MatNumpadKey) {
-    if (this.debug) console.debug('[numpad-container] onKeyPress() ', keyDef.key);
-
-    const customEvent = new MatNumpadEvent('keypress', { key: keyDef.key, target: this.inputElement });
-
-    //{detail: {...keyDef, target: this.inputElement}})
-    this.numpadRef.keypress.next(customEvent);
-  }
-
-  @HostListener('window:keydown', ['$event'])
-  onKeydown(event: KeyboardEvent) {
-    //if (this.debug)
-    console.debug('[numpad-container] onKeypress()', event);
-    this.numpadRef.keypress.next(event);
-  }
-
-  overlayClick(event: Event) {
-    this.close();
-  }
-
-  close(): void {
-    if (this.disableAnimation) {
-      this.numpadRef.close();
-      return;
-    }
-
-    if (this.modalState) this.modalState = AnimationState.LEAVE;
-    if (this.panelState) this.panelState = AnimationState.LEAVE;
-    if (this.backdropState) this.backdropState = AnimationState.LEAVE;
-    this.markForCheck();
-  }
-
-  animationDone(event: AnimationEvent): void {
-    if (event.phaseName === 'done' && event.toState === AnimationState.LEAVE) {
-      this.numpadRef.close();
-    }
-  }
-
-  protected defineFilteredKeymap(): MatNumpadKeymap {
-    let keymap = this.keymap;
-
-    // Replace decimal separator button, by empty
-    if (!this.decimal) {
-      keymap = keymap.map((row) => row.map((item) => (item && item.key !== '.' && item.key !== ',' ? item : null)));
-    }
-
-    return keymap;
-  }
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-}

package/src/app/shared/material/numpad/numpad.content.html

@@ -1,13 +0,0 @@
-<div [appendNumpadToInput]="inputElement" *ngIf="appendToInput; else modal">
-  <!--suppress HtmlUnknownAttribute -->
-  <ng-container *ngTemplateOutlet="content"></ng-container>
-</div>
-
-<ng-template #modal>
-  <!--suppress HtmlUnknownAttribute -->
-  <ng-container *ngTemplateOutlet="content"></ng-container>
-</ng-template>
-
-<ng-template #content>
-  <ng-content></ng-content>
-</ng-template>

package/src/app/shared/material/numpad/numpad.content.ts

@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'mat-numpad-content',
-  templateUrl: './numpad.content.html',
-})
-export class MatNumpadContent {
-  @Input() appendToInput: boolean;
-  @Input() inputElement: any;
-}

package/src/app/shared/material/numpad/numpad.directive.ts

@@ -1,159 +0,0 @@
-import { Directive, ElementRef, HostListener, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { MatNumpadKeymap } from './numpad.model';
-import { MatNumpadComponent } from './numpad.component';
-
-@Directive({
-  selector: '[matNumpad]',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: NumpadDirective,
-      multi: true,
-    },
-  ],
-  host: {
-    '[disabled]': 'disabled',
-    // '[decimal]': 'decimal',
-    '(click)': 'onClick($event)',
-    '(change)': 'updateValue($event.target.value)',
-    '(blur)': 'onTouched()',
-  },
-})
-export class NumpadDirective implements ControlValueAccessor, OnDestroy, OnChanges {
-  private _numpad: MatNumpadComponent;
-
-  @Input() keymap: MatNumpadKeymap;
-
-  @Input('matNumpad')
-  set numpad(numpad: MatNumpadComponent) {
-    this.registerNumpad(numpad);
-  }
-
-  @Input()
-  set value(value: string) {
-    this._value = value || '';
-    this.updateInputValue();
-    return;
-  }
-
-  get value(): string {
-    if (!this._value) {
-      return '';
-    }
-    return this._value;
-  }
-
-  private _value = '';
-
-  @Input() disabled: boolean;
-  @Input() decimal: boolean;
-  @Input() disableClick: boolean;
-
-  private numpadSubscriptions: Subscription[] = [];
-
-  onTouched = () => {};
-
-  private onChange: (value: any) => void = () => {};
-
-  constructor(private elementRef: ElementRef) {}
-
-  get element(): any {
-    return this.elementRef && this.elementRef.nativeElement;
-  }
-
-  updateValue(value: string) {
-    console.debug('[numpad-directive] updateValue()', value);
-    this.value = value;
-    this.onChange(value);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    /*if (changes['value'] && changes['value'].currentValue) {
-      this.defaultValue = changes['value'].currentValue;
-    }*/
-  }
-
-  @HostListener('click', ['$event'])
-  onClick(event: Event) {
-    if (!this.disableClick) {
-      this._numpad.open();
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
-
-  writeValue(value: string): void {
-    this.value = value;
-    if (value) {
-      //this.defaultValue = value;
-    }
-  }
-
-  registerOnChange(fn: (value: any) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  ngOnDestroy() {
-    this.numpadSubscriptions.forEach((s) => s.unsubscribe());
-  }
-
-  private registerNumpad(numpad: MatNumpadComponent): void {
-    if (numpad) {
-      console.debug('[numpad-directive] Registering numpad', numpad);
-      this._numpad = numpad;
-      this._numpad.registerInput(this);
-      this.numpadSubscriptions.push(
-        this._numpad.keypress
-          .pipe
-          //filter(event => event.inputTarget === this.element)
-          ()
-          .subscribe((event) => this.applyingKey(event))
-      );
-    } else {
-      throw new Error('MatNumpadComponent is not defined.' + ' Please make sure you passed the numpad to matNumpad directive');
-    }
-  }
-
-  private applyingKey(event: KeyboardEvent) {
-    console.debug('[numpad-directive] Receiving key=' + event.key);
-    let value = this.value !== null && this.value !== undefined ? this.value : '';
-    // Remove french decimal separator
-    value = typeof value === 'number' ? '' + value : value.replace(',', '.');
-    if (event.key === '.' || event.key === ',') {
-      if (value.indexOf('.') === -1) {
-        value += '.';
-      }
-    } else if (event.key === 'Backspace') {
-      // Remove last character
-      value = value.length > 1 ? value.substr(0, value.length - 1) : '';
-    } else if (event.key === 'Enter' || event.keyCode === 13) {
-      this._numpad.close();
-      return;
-    } else if (event.key === 'Tab') {
-      // TODO goto next input ?
-      return; // Skip
-    } else if (event.key === 'Escape') {
-      this._numpad.close();
-      return;
-    } else {
-      value += event.key || '';
-    }
-
-    this.updateValue(value);
-    this.onTouched();
-  }
-
-  private updateInputValue(): void {
-    this.elementRef.nativeElement.value = this.value;
-  }
-}