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

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

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

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

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

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

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

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

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

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

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

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

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