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

package/src/app/shared/material/material.testing.module.ts

@@ -1,135 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {AutocompleteTestPage} from './autocomplete/testing/autocomplete.test';
-import {LatLongTestPage} from './latlong/testing/latlong.test';
-import {SharedTestsPage, TestingPage} from '../testing/tests.page';
-import {SharedMaterialModule} from './material.module';
-import {IonicModule} from '@ionic/angular';
-import {CommonModule} from '@angular/common';
-import {ReactiveFormsModule} from '@angular/forms';
-import {SwipeTestPage} from './swipe/testing/swipe.test';
-import {TranslateModule} from '@ngx-translate/core';
-import {DateTimeTestPage} from './datetime/testing/mat-date-time.test';
-import {ChipsTestPage} from './chips/testing/chips.test';
-import {MatBadgeTestPage} from './badge/badge.test';
-import {NumpadTestPage} from './numpad/testing/numpad.test';
-import {DateTestPage} from './datetime/testing/mat-date.test';
-import {SharedPipesModule} from "../pipes/pipes.module";
-import {ObservableTestPage} from '../testing/observable.test';
-import {DateShortTestPage} from './datetime/testing/mat-dateshort.test';
-
-export const SHARED_MATERIAL_TESTING_PAGES: TestingPage[] = [
-  {label: 'Shared Material components', divider: true},
-  {label: 'Date/Time field', page: '/testing/shared/datetime'},
-  {label: 'Date field', page: '/testing/shared/date'},
-  {label: 'Date short field', page: '/testing/shared/dateshort'},
-  {label: 'Autocomplete field', page: '/testing/shared/autocomplete'},
-  {label: 'Lat/Long field', page: '/testing/shared/latlong'},
-  {label: 'Numeric pad component', page: '/testing/shared/numpad'},
-
-  {label: 'Swipe component', page: '/testing/shared/swipe'},
-  {label: 'Chips component', page: '/testing/shared/chips'},
-
-  {label: 'Shared directives', divider: true},
-  {label: 'Badge directive', page: '/testing/shared/badge'},
-
-  {label: 'Shared utils', divider: true},
-  {label: 'Observable', page: '/testing/shared/observable'}
-];
-
-const routes: Routes = [
-  {
-    path: '',
-    pathMatch: 'full',
-    component: SharedTestsPage
-  },
-  {
-    path: 'observable',
-    pathMatch: 'full',
-    component: ObservableTestPage
-  },
-  {
-    path: 'autocomplete',
-    pathMatch: 'full',
-    component: AutocompleteTestPage
-  },
-  {
-    path: 'datetime',
-    pathMatch: 'full',
-    component: DateTimeTestPage
-  },
-  {
-    path: 'date',
-    pathMatch: 'full',
-    component: DateTestPage
-  },
-  {
-    path: 'dateshort',
-    pathMatch: 'full',
-    component: DateShortTestPage
-  },
-  {
-    path: 'latlong',
-    pathMatch: 'full',
-    component: LatLongTestPage
-  },
-  {
-    path: 'numpad',
-    pathMatch: 'full',
-    component: NumpadTestPage
-  },
-  {
-    path: 'swipe',
-    pathMatch: 'full',
-    component: SwipeTestPage
-  },
-  {
-    path: 'chips',
-    pathMatch: 'full',
-    component: ChipsTestPage
-  },
-  {
-    path: 'badge',
-    pathMatch: 'full',
-    component: MatBadgeTestPage
-  }
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    ReactiveFormsModule,
-    SharedMaterialModule,
-    TranslateModule.forChild(),
-    RouterModule.forChild(routes),
-    SharedPipesModule
-  ],
-  declarations: [
-    DateTimeTestPage,
-    DateTestPage,
-    DateShortTestPage,
-    AutocompleteTestPage,
-    LatLongTestPage,
-    NumpadTestPage,
-    SwipeTestPage,
-    ChipsTestPage,
-    MatBadgeTestPage,
-    ObservableTestPage
-  ],
-  exports: [
-    SharedMaterialModule,
-    RouterModule,
-    DateTimeTestPage,
-    DateTestPage,
-    DateShortTestPage,
-    AutocompleteTestPage,
-    LatLongTestPage,
-    NumpadTestPage,
-    SwipeTestPage,
-    ChipsTestPage,
-    ObservableTestPage
-  ]
-})
-export class MaterialTestingModule {
-}

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

@@ -1,54 +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,109 +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,78 +0,0 @@
-import {DEFAULT_KEYMAP, MatNumpadEvent, 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';
-
-  @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,32 +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,50 +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,176 +0,0 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy, 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, OnDestroy, 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();
-  }
-
-  ngOnDestroy(): void {
-  }
-
-  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;
-}