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

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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,54 @@
+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

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

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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,32 @@
+<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

@@ -0,0 +1,50 @@
+: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

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,13 @@
+<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

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