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

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

@@ -0,0 +1,173 @@
+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;
+  }
+
+}
+

package/src/app/shared/material/numpad/numpad.dom-service.ts

@@ -0,0 +1,46 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  Inject,
+  Injectable,
+  Injector,
+  Optional,
+  Type
+} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {MatNumpadContainerComponent} from './numpad.container';
+import {MatNumpadConfig} from './numpad.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class MatNumpadDomService {
+
+    private componentRef: ComponentRef<MatNumpadContainerComponent>;
+
+    constructor(private cfr: ComponentFactoryResolver,
+                private appRef: ApplicationRef,
+                private injector: Injector,
+                @Optional() @Inject(DOCUMENT) private document: any) {
+    }
+
+    appendNumpadToBody(numpadType: Type<MatNumpadContainerComponent>, config: MatNumpadConfig): void {
+        this.componentRef = this.cfr.resolveComponentFactory(numpadType).create(this.injector);
+
+        Object.keys(config).forEach(key => this.componentRef.instance[key] = config[key]);
+
+        this.appRef.attachView(this.componentRef.hostView);
+
+        const domElement: HTMLElement = (this.componentRef.hostView as EmbeddedViewRef<MatNumpadContainerComponent>)
+            .rootNodes[0];
+
+        this.document.body.appendChild(domElement);
+    }
+
+    destroyNumpad(): void {
+        this.componentRef.destroy();
+        this.appRef.detachView(this.componentRef.hostView);
+    }
+}

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

@@ -0,0 +1,55 @@
+import {EventEmitter} from '@angular/core';
+
+export interface MatNumpadRef {
+
+    keypress: EventEmitter<KeyboardEvent>;
+
+    close(): void;
+}
+
+export interface MatNumpadConfig {
+  inputElement: any;
+  keymap: MatNumpadKey[][];
+  numpadRef: MatNumpadRef;
+  decimal: boolean;
+  disableAnimation: boolean;
+  noBackdrop: boolean;
+  position: string;
+
+  appendToInput: boolean;
+  // TODO
+  //cssClass width = scope.settings.width || '100%';
+  //scope.align = scope.settings.align || 'center';
+  // animation: 'slide-up' | 'pop'
+  // resizeContent: true
+  // animationDuration = 150;
+}
+
+export interface MatNumpadKey {
+  key: string;
+  label?: string;
+  color?: string;
+  matIcon?: string;
+  icon?: string;
+}
+
+export declare type MatNumpadKeymap = MatNumpadKey[][];
+
+export const DEFAULT_KEYMAP: MatNumpadKeymap = [
+  [{key: '1'}, {key: '2'}, {key: '3'}, {key: 'Backspace', icon: 'backspace', color: 'light'}],
+  [{key: '4'}, {key: '5'}, {key: '6'}, {key: 'Tab', label: 'COMMON.BTN_NEXT_SHORT', color: 'light'}],
+  [{key: '7'}, {key: '8'}, {key: '9'}, {key: '.', label: 'COMMON.BTN_DECIMAL_SEPARATOR', color: 'light'}],
+  [null, {key: '0'}, null,  {key: 'Enter', icon: 'checkmark', color: 'tertiary'}]
+];
+
+//export declare type MatNumpadEventDetail = MatNumpadKey & {target: any};
+//export declare type MatNumpadEvent = CustomEvent<MatNumpadEventDetail>
+
+export class MatNumpadEvent extends KeyboardEvent {
+  inputTarget: any;
+  constructor(type: string, init: KeyboardEventInit & {target: any}) {
+    super(type, init);
+    this.inputTarget = init && init.target;
+  }
+}
+

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

@@ -0,0 +1,38 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {MatNumpadComponent} from './numpad.component';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {TranslateModule} from '@ngx-translate/core';
+import {NumpadDirective} from './numpad.directive';
+import {MatNumpadContainerComponent} from './numpad.container';
+import {MatNumpadContent} from './numpad.content';
+import {AppendToInputDirective} from './numpad.append-to-input.directive';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    MatButtonModule,
+    MatIconModule,
+    TranslateModule.forChild()
+  ],
+  exports: [
+    MatNumpadComponent,
+    NumpadDirective,
+    MatNumpadContainerComponent,
+    MatNumpadContent,
+    AppendToInputDirective
+  ],
+  declarations: [
+    MatNumpadContainerComponent,
+    MatNumpadComponent,
+    MatNumpadContent,
+    NumpadDirective,
+    AppendToInputDirective
+  ]
+})
+export class SharedMatNumpadModule {
+}
+

package/src/app/shared/material/numpad/testing/numpad.test.html

@@ -0,0 +1,146 @@
+<ion-header>
+  <ion-toolbar color="primary">
+
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Numeric pad test page</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <h1>Numpad test page:</h1>
+
+  <form class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
+
+    <ion-grid>
+
+      <ion-row>
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">
+                  Decimal field, readonly
+                </ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field >
+                <input matInput type="text" formControlName="empty" placeholder="Empty decimal field"
+                       autocomplete="off"
+                       [matNumpad]="numpadDecimal"
+                       readonly>
+                <mat-numpad [decimal]="true" #numpadDecimal></mat-numpad>
+              </mat-form-field>
+
+
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- filled -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">
+                  Integer field
+                </ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field >
+                <input matInput type="number" formControlName="integer" placeholder="Filled integer field"
+                       autocomplete="off"
+                       [matNumpad]="numpadInteger">
+                <mat-numpad #numpadInteger [decimal]="false"></mat-numpad>
+
+              </mat-form-field>
+
+
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- append to input -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">
+                  Attach to input, readonly
+                </ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field >
+                <input matInput type="text" formControlName="integer" placeholder="A number"
+                       autocomplete="off"
+                       [matNumpad]="numpadAppendToInput"
+                       readonly>
+                <mat-numpad #numpadAppendToInput [appendToInput]="true"></mat-numpad>
+              </mat-form-field>
+
+
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+
+        <!-- disable -->
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">
+                  Disabled control
+                </ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field >
+                <input matInput type="number" formControlName="disable" placeholder="Disabled field"
+                       autocomplete="off"
+                       [matNumpad]="numpadDisabled">
+                <mat-numpad #numpadDisabled></mat-numpad>
+              </mat-form-field>
+
+
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+
+
+      <!-- Other field (for comparision) -->
+      <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">
+                  Mat date time
+                </ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-date-time-field formControlName="datetime" placeholder="Date/Time field (desktop)">
+              </mat-date-time-field>
+
+              <mat-date-time-field formControlName="datetime"
+                                   placeholder="Date/Time field (mobile)"
+                                   [mobile]="true">
+              </mat-date-time-field>
+
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+  </form>
+
+</ion-content>

package/src/app/shared/material/numpad/testing/numpad.test.ts

@@ -0,0 +1,55 @@
+import {Component, OnInit} from '@angular/core';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
+import {SharedValidators} from '../../../validator/validators';
+
+
+@Component({
+  selector: 'app-numpad-test',
+  templateUrl: './numpad.test.html'
+})
+export class NumpadTestPage implements OnInit {
+
+
+  form: UntypedFormGroup;
+
+  constructor(
+    protected formBuilder: UntypedFormBuilder
+  ) {
+    this.form = formBuilder.group({
+      empty: [null, Validators.required],
+      integer: [null, Validators.compose([Validators.required, SharedValidators.integer])],
+      disable: [null, Validators.required],
+      datetime: [null]
+    });
+
+    this.form.get('disable').disable();
+  }
+
+  ngOnInit() {
+
+
+    this.loadData();
+    //setTimeout(() => this.loadData(), 1500);
+
+  }
+
+  // Load the form with data
+  async loadData() {
+    const data = {
+      empty: null,
+      integer: 99,
+      disable: -111.11
+    };
+
+    this.form.patchValue(data);
+  }
+
+  doSubmit(event) {
+    console.debug('Validate form: ', this.form.value);
+  }
+
+  /* -- protected methods -- */
+
+
+}
+

package/src/app/shared/material/paginator/material.paginator-i18n.ts

@@ -0,0 +1,49 @@
+
+import { TranslateService } from '@ngx-translate/core';
+import {MatPaginatorIntl} from '@angular/material/paginator';
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class MatPaginatorI18n extends MatPaginatorIntl {
+  itemsPerPageLabel: string;
+  nextPageLabel: string;
+  previousPageLabel: string;
+  ofLabel: string;
+
+  constructor(private translate: TranslateService) {
+    super();
+
+    this.translate.get([
+      'COMMON.PAGINATOR.ITEMS_PER_PAGE',
+      'COMMON.PAGINATOR.NEXT_PAGE',
+      'COMMON.PAGINATOR.PREVIOUS_PAGE',
+      'COMMON.PAGINATOR.OF',
+    ])
+      .subscribe((translations: {[key: string]: string}) => {
+        console.info('[MatPaginatorI18n] Update pagination translations');
+        this.itemsPerPageLabel = this._getTranslationValue(translations, 'COMMON.PAGINATOR.ITEMS_PER_PAGE', '');
+        this.nextPageLabel = this._getTranslationValue(translations, 'COMMON.PAGINATOR.NEXT_PAGE', '>');
+        this.previousPageLabel = this._getTranslationValue(translations, 'COMMON.PAGINATOR.PREVIOUS_PAGE', '<');
+        this.ofLabel =  this._getTranslationValue(translations, 'COMMON.PAGINATOR.OF', '/');
+        this.changes.next();
+      });
+  }
+
+  getRangeLabel = (page: number, pageSize: number, length: number) => {
+    if (length === 0 || pageSize === 0) {
+      return '0 ' + this.ofLabel + ' ' + length;
+    }
+    length = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    // If the start index exceeds the list length, do not try and fix the end index to the end.
+    const endIndex = startIndex < length ?
+      Math.min(startIndex + pageSize, length) :
+    startIndex + pageSize;
+    return startIndex + 1 + ' - ' + endIndex + ' ' + this.ofLabel + ' ' + length;
+  };
+
+  private _getTranslationValue(translations: any, key: string, defaultValue: string): string {
+    return (translations[key] !== key) ? translations[key] : defaultValue;
+  }
+
+}

package/src/app/shared/material/stepper/material.stepper-i18n.ts

@@ -0,0 +1,18 @@
+import {MatStepperIntl} from '@angular/material/stepper';
+import {TranslateService} from '@ngx-translate/core';
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class MatStepperI18n extends MatStepperIntl {
+
+  constructor(private translate: TranslateService) {
+    super();
+    translate.onLangChange.subscribe(() => this.translateLabels());
+
+    this.translateLabels();
+  }
+
+  private translateLabels() {
+    this.optionalLabel = this.translate.instant('COMMON.OPTIONAL');
+  }
+}

package/src/app/shared/material/swipe/material.swipe.html

@@ -0,0 +1,63 @@
+<mat-form-field [floatLabel]="showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel"
+                [appearance]="appearance"
+                [class]="classList"
+                [class.mat-form-field-disabled]="disabled">
+  <mat-label *ngIf="placeholder && floatLabel!=='never'">
+    {{placeholder}}
+  </mat-label>
+  <input matInput #fakeInput type="text"
+         [formControl]="formControl"
+         [readonly]="true"
+         (focus)="_onFocusFakeInput($event)"
+         [required]="required"
+         [class.cdk-visually-hidden]="showSlides"
+         [tabindex]="tabindex">
+
+  <div class="slides-container" [class.hidden]="!showSlides" >
+    <swiper-container #swiper
+                      [modules]="swiperModules"
+                      [speed]="100" [slidesPerView]="1"
+                      (init)="swiperLoaded()"
+                      (reachbeginning)="reachStart(true)"
+                      (reachend)="reachEnd(true)"
+                      (slidenexttransitionend)="reachStart(false)"
+                      (slideprevtransitionend)="reachEnd(false)"
+                      (slidechange)="slideChanged()">
+      <swiper-slide *ngFor="let item of $items | async">
+        <ion-label>{{ displayWith(item) }}</ion-label>
+      </swiper-slide>
+
+    </swiper-container>
+  </div>
+
+  <button #prevButton
+          mat-icon-button
+          type="button"
+          class="button-prev"
+          [hidden]="!showSlides"
+          [disabled]="previousDisabled"
+          (click)="previous()">
+    <mat-icon>chevron_left</mat-icon>
+  </button>
+  <button #nextButton
+          mat-icon-button
+          type="button"
+          class="button-next"
+          [hidden]="!showSlides"
+          [disabled]="nextDisabled"
+          (click)="next()">
+    <mat-icon>chevron_right</mat-icon>
+  </button>
+
+  <button matSuffix mat-icon-button tabindex="-1"
+          type="button"
+          *ngIf="clearable"
+          (click)="clearValue($event)"
+          [hidden]="disabled || !formControl.value">
+    <mat-icon>close</mat-icon>
+  </button>
+
+  <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+  <mat-error *ngIf="formControl.hasError('entity')" translate>ERROR.FIELD_INVALID</mat-error>
+
+</mat-form-field>

package/src/app/shared/material/swipe/material.swipe.scss

@@ -0,0 +1,39 @@
+:host {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+}
+
+input.hidden {
+  display: none;
+}
+
+.slides-container {
+  padding-inline-start: 40px;
+  padding-inline-end: 40px;
+  .swiper-slide {
+    font-size: 16px !important;
+  }
+
+  &.hidden {
+    visibility: hidden;
+    height: 0 !important;
+  }
+}
+
+.button-prev,
+.button-next {
+  position: absolute;
+  top: calc(50% - 20px);
+  z-index: 10;
+}
+
+.button-prev {
+  left: 0;
+  right: auto;
+}
+
+.button-next {
+  left: auto;
+  right: 0;
+}