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

package/src/app/shared/toast/toasts.ts

@@ -1,183 +0,0 @@
-import {AnimationController, createAnimation, IonicSafeString, ToastController} from '@ionic/angular';
-import {TranslateService} from '@ngx-translate/core';
-import {AnimationBuilder, OverlayEventDetail, ToastOptions} from '@ionic/core';
-import {ToastButton} from '@ionic/core/dist/types/components/toast/toast-interface';
-import {isEmptyArray, isNotNil} from '../functions';
-import {Injector} from '@angular/core';
-
-const TOAST_MAX_HEIGHT_PX = 75;
-const TOAST_MAX_STACK_SIZE = 4;
-
-export declare interface ShowToastOptions extends ToastOptions {
-  type?: 'error'|'warning'|'info';
-  messageParams?: any;
-  showCloseButton?: boolean;
-  onWillPresent?: (toast: HTMLIonToastElement) => void;
-}
-
-export class Toasts {
-  static counter = 0;
-  static stackSize = 0;
-
-  static async showSimple<T = any>(
-    injector: Injector,
-    opts: ShowToastOptions
-  ): Promise<OverlayEventDetail<T>> {
-      return this.show(injector.get(ToastController), injector.get(TranslateService), opts);
-  }
-
-  static async show<T = any>(
-    toastController: ToastController,
-    translate: TranslateService,
-    opts: ShowToastOptions
-  ): Promise<OverlayEventDetail<T>> {
-
-    // DEBUG
-    //console.debug('[Toasts.show]', opts);
-
-    if (!toastController || !translate) {
-      console.error('Missing required argument \'toastController\' or \'translate\'');
-      if (opts.message instanceof IonicSafeString) console.info('[toasts] message: ' + (translate && translate.instant(opts.message.value) || opts.message.value));
-      else if (typeof opts.message === 'string') console.info('[toasts] message: ' + (translate && translate.instant(opts.message, opts.messageParams) || opts.message));
-      return Promise.resolve({});
-    }
-
-    this.counter++; // Increment toast counter
-    let currentOffset = this.stackSize;
-    if (this.stackSize < TOAST_MAX_STACK_SIZE) {
-      this.stackSize++; // Increment stack offset
-    }
-    else {
-      this.stackSize = 1; // Reset the stack
-      currentOffset = 0;
-    }
-    const updateCounters = () => {
-      // Decrease counter
-      this.counter--;
-      // If all toast closed: reset the stack offset
-      if (this.counter === 0) {
-        this.stackSize = 0;
-      }
-      // If current toast is the last one, decrease the offset
-      else if (this.stackSize == currentOffset + 1){
-        this.stackSize--;
-      }
-    };
-
-    const message = opts.message && opts.message instanceof IonicSafeString ? opts.message.value : opts.message as string;
-    const i18nKeys = [message];
-    if (opts.header) i18nKeys.push(opts.header);
-
-    let closeButton: ToastButton;
-    if (opts.showCloseButton) {
-      opts.buttons = opts.buttons || [];
-      const buttonIndex = opts.buttons
-        .map(b => typeof b === 'object' && b as ToastButton || undefined)
-        .filter(isNotNil)
-        .findIndex(b => b.role === 'close');
-      if (buttonIndex !== -1) {
-        closeButton = opts.buttons[buttonIndex] as ToastButton;
-      } else {
-        closeButton = {role: 'close'};
-        opts.buttons.push(closeButton);
-      }
-      closeButton.text = closeButton.text || 'COMMON.BTN_OK';
-      i18nKeys.push(closeButton.text);
-    }
-
-    // Read CSS
-    const cssArray = opts.cssClass && typeof opts.cssClass === 'string' && opts.cssClass.split(',') || (opts.cssClass as Array<string>) || [];
-
-    // Add 'error' class, if need
-    if (opts.type) {
-      switch (opts.type) {
-        case 'error':
-          cssArray.push('danger');
-          break;
-        case 'warning':
-          cssArray.push('accent');
-          break;
-        case 'info':
-          cssArray.push('secondary');
-          break;
-      }
-    }
-
-    const translations = translate.instant(i18nKeys);
-    if (opts.messageParams) {
-      translations[message] = translate.instant(message, opts.messageParams);
-    }
-
-    if (closeButton) {
-      closeButton.text = translations[closeButton.text];
-    }
-
-    // Retrieve the toast position
-    const position = opts.position || (opts.mode === 'ios' ? 'bottom' : 'top');
-
-    if (!opts.enterAnimation && position !== 'middle') {
-      // FIXME: animation failed, since migration to Ionic 6
-      // When computing, the baseEle has no wrapper yet
-      //opts.enterAnimation = this.createEnterAnimation(animationCtrl, currentOffset, opts);
-      // opts.enterAnimation = (baseEl: HTMLElement, opts) => createAnimation()
-      //     .addElement(baseEl)
-      //     .delay(400)
-      //     .afterAddClass('stacked');
-      // As workaround, we add an offset using a CSS class
-      cssArray.push('toast-stacked-' + position);
-      cssArray.push('toast-stack-offset-' + currentOffset);
-    }
-
-    opts.cssClass = cssArray;
-
-    const toast = await toastController.create({
-      // Default values
-      position,
-      duration: opts.showCloseButton ? 10000 : 4000,
-      ...opts,
-      message: translations[message],
-      //header: opts.header && translations[opts.header] || undefined
-    });
-
-    if (opts.onWillPresent) opts.onWillPresent(toast);
-
-    await toast.present();
-
-    if (isEmptyArray(opts.buttons)) {
-      // Not need to wait dismiss (no 'await')
-      toast.onDidDismiss().then(updateCounters);
-      return null; // no result
-    }
-
-    else {
-      // Wait for button result
-      const result = await toast.onDidDismiss();
-
-      updateCounters();
-
-      return result;
-    }
-  }
-
-  static createEnterAnimation(animationCtrl: AnimationController,
-                              currentOffset: number,
-                              opts: ShowToastOptions): AnimationBuilder {
-    if (opts.position === 'middle') {
-      return null;
-    }
-
-    const direction = opts.position === 'top' ? 1 : -1;
-    const start = (currentOffset) * TOAST_MAX_HEIGHT_PX  - direction * TOAST_MAX_HEIGHT_PX;
-    const end = direction * (currentOffset) * TOAST_MAX_HEIGHT_PX;
-    return (baseEl: HTMLElement, opts) => {
-      // FIXME: wrapper is always null
-      const wrapper = baseEl.querySelector('.toast-wrapper');
-      return createAnimation()
-        .addElement(wrapper)
-        .duration(250)
-        .fromTo('transform', `translateY(${start}px)`, `translateY(${end}px)`)
-        .fromTo('opacity', '0', '1');
-    }
-  }
-
-}

package/src/app/shared/toolbar/modal-toolbar.html

@@ -1,32 +0,0 @@
-<ion-header>
-  <ion-toolbar [color]="color">
-    <ion-buttons slot="start">
-      <ion-button visible-xs visible-sm visible-mobile
-                  (click)="cancel.emit()">
-        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
-      </ion-button>
-
-      <ng-content select="[slot=start]"></ng-content>
-    </ion-buttons>
-
-    <ion-title [innerHTML]="title"></ion-title>
-
-    <ng-content select="ion-title"></ng-content>
-
-    <ng-content select="ion-buttons[slot=end]"></ng-content>
-
-    <ion-buttons slot="end">
-
-      <ng-content select="ion-button[slot=end]"></ng-content>
-
-      <ion-spinner *ngIf="showSpinner"></ion-spinner>
-
-      <ion-button visible-xs visible-sm visible-mobile
-                  *ngIf="canValidate"
-                  (click)="validate.emit($event)">
-        <ion-icon slot="icon-only" *ngIf="validateIcon?.icon"  [name]="validateIcon.icon"></ion-icon>
-        <mat-icon slot="icon-only" *ngIf="validateIcon?.matIcon" >{{validateIcon.matIcon}}</mat-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>

package/src/app/shared/toolbar/modal-toolbar.ts

@@ -1,63 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
-import {toBoolean} from '../functions';
-import {Subscription} from 'rxjs';
-import {Hotkeys} from '../hotkeys/hotkeys.service';
-import {IconRef} from '../types';
-import {filter} from 'rxjs/operators';
-
-@Component({
-  selector: 'app-modal-toolbar',
-  templateUrl: 'modal-toolbar.html',
-  styleUrls: ['./modal-toolbar.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ModalToolbarComponent implements OnInit, OnDestroy {
-
-  private _subscription = new Subscription();
-
-  @Input()
-  modalName = 'modal-toolbar';
-
-  @Input()
-  title = '';
-
-  @Input()
-  color = 'primary';
-
-  @Input()
-  showSpinner = false;
-
-  @Input()
-  canValidate: boolean;
-
-  @Input() validateIcon: IconRef = {icon: 'checkmark'};
-
-  @Output()
-  cancel = new EventEmitter<Event>();
-
-  @Output()
-  validate = new EventEmitter<Event>();
-
-  constructor(private hotkeys: Hotkeys) {}
-
-  ngOnInit() {
-    this.canValidate = toBoolean(this.canValidate, this.validate.observers.length > 0);
-
-    // Ctrl+S
-    this._subscription.add(
-      this.hotkeys.addShortcut({keys: 'control.s', description: 'COMMON.BTN_VALIDATE', elementName: this.modalName})
-        .pipe(filter(() => this.canValidate))
-        .subscribe((event) => this.validate.emit(event)));
-
-    // Escape
-    this._subscription.add(
-      this.hotkeys.addShortcut({keys: 'escape', description: 'COMMON.BTN_CLOSE', elementName: this.modalName})
-        .subscribe((event) => this.cancel.emit(event)));
-
-  }
-
-  ngOnDestroy(): void {
-    this._subscription.unsubscribe();
-  }
-
-}

package/src/app/shared/toolbar/toolbar.html

@@ -1,71 +0,0 @@
-<ion-header [class]="class">
-  <ion-toolbar [color]="color">
-
-    <ion-buttons slot="start">
-
-      <!-- back button -->
-      <ion-button class="back-button"
-                  *ngIf="canGoBack"
-                  (click)="doBackClick($event)"
-                  routerDirection="back" >
-        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
-      </ion-button>
-
-      <!-- show menu button -->
-      <ion-menu-toggle #menuToggle
-                       [menu]="'left'"
-                       [class.cdk-visually-hidden]="canGoBack || !canShowMenu">
-        <ion-button>
-          <ion-icon slot="icon-only" name="menu"></ion-icon>
-        </ion-button>
-      </ion-menu-toggle>
-
-      <ng-content select="[slot=start]"></ng-content>
-    </ion-buttons>
-
-    <ion-title [innerHTML]="title"></ion-title>
-
-    <ng-content select="ion-title, ion-segment"></ng-content>
-
-    <ng-content select="ion-buttons[slot=end]"></ng-content>
-
-    <ion-buttons slot="end" collapse="true">
-
-      <ng-content select="[slot=end]"></ng-content>
-
-      <!-- search bar -->
-      <ion-searchbar #searchbar animated
-                     type="search"
-                     *ngIf="hasSearch"
-                     [class.cdk-visually-hidden]="!showSearchBar"
-                     show-cancel-button="always"
-                     (ionChange)="ionSearchBarChanged($event)"
-                     (ionCancel)="toggleSearchBar()">
-      </ion-searchbar>
-
-      <!-- search button -->
-      <ion-button (click)="toggleSearchBar()"
-                  *ngIf="hasSearch && !showSearchBar">
-        <ion-icon slot="icon-only" name="search"></ion-icon>
-      </ion-button>
-
-      <!-- close button -->
-      <ion-button *ngIf="hasClose"
-                  (tap)="tapClose($event)"
-                  class="visible-xs visible-sm visible-mobile">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-
-      <!-- validate button -->
-      <ion-button *ngIf="hasValidate"
-                  (tap)="tapValidate($event)"
-                  class="visible-xs visible-sm visible-mobile">
-        <ion-icon slot="icon-only" name="save"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-
-  <!-- progress bar -->
-  <mat-progress-bar [color]="color|matColor" [mode]="_progressBarMode$ | async">
-  </mat-progress-bar>
-</ion-header>

package/src/app/shared/toolbar/toolbar.module.ts

@@ -1,35 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {TranslateModule} from '@ngx-translate/core';
-import {IonicModule} from '@ionic/angular';
-import {ToolbarComponent} from './toolbar';
-import {ModalToolbarComponent} from './modal-toolbar';
-import {HammerModule} from '@angular/platform-browser';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {SharedPipesModule} from '../pipes/pipes.module';
-import {MatIconModule} from '@angular/material/icon';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    TranslateModule,
-    HammerModule,
-    SharedPipesModule,
-
-    MatProgressBarModule,
-    MatIconModule
-  ],
-  declarations: [
-    ToolbarComponent,
-    ModalToolbarComponent
-  ],
-  exports: [
-    ToolbarComponent,
-    ModalToolbarComponent
-  ]
-})
-export class SharedToolbarModule {
-
-}

package/src/app/shared/toolbar/toolbar.ts

@@ -1,254 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Optional, Output, ViewChild } from '@angular/core';
-import { APP_PROGRESS_BAR_SERVICE, IProgressBarService } from '../services/progress-bar.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import {IonMenuToggle, IonRouterOutlet, IonSearchbar, NavController} from '@ionic/angular';
-import { isNotNil, isNotNilOrBlank, toBoolean } from '../functions';
-import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { HammerTapEvent } from '../gesture/hammer.utils';
-import { HAMMER_PRESS_TIME } from '../gesture/gesture-config';
-import { AppColors } from '../types';
-import { SearchbarChangeEventDetail as ISearchbarSearchbarChangeEventDetail } from '@ionic/core/dist/types/components/searchbar/searchbar-interface';
-import { ProgressBarMode } from '@angular/material/progress-bar';
-
-export abstract class ToolbarToken {
-  abstract onBackClick: Observable<Event>;
-  abstract doBackClick(event: Event);
-  abstract goBack(): Promise<boolean>;
-  abstract canGoBack: boolean;
-}
-
-@Component({
-  selector: 'app-toolbar',
-  templateUrl: 'toolbar.html',
-  styleUrls: ['./toolbar.scss'],
-  providers: [
-    {provide: ToolbarToken, useExisting: ToolbarComponent}
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ToolbarComponent implements ToolbarToken, OnInit, OnDestroy {
-
-  private _closeTapCount = 0;
-  private _validateTapCount = 0;
-  private _defaultBackHref: string;
-  private _backHref: string;
-  protected readonly _progressBarMode$ = new BehaviorSubject<ProgressBarMode>(null);
-
-  @Input() set progressBarMode(value: ProgressBarMode) {
-    if (this.progressBarService) return;
-    this._progressBarMode$.next(value);
-  }
-
-  get progressBarMode(): ProgressBarMode {
-    return this._progressBarMode$.value;
-  }
-
-  @Input() title: string = '';
-  @Input() color: AppColors = 'primary';
-  @Input() class = '';
-
-  @Input() set backHref(value: string) {
-    if (value !== this._backHref) {
-      this._backHref = value;
-      this.canGoBack = this.canGoBack || isNotNil(value);
-      this.markForCheck();
-    }
-  }
-
-  get backHref(): string {
-    return this._backHref;
-  }
-
-  @Input() set defaultBackHref(value: string) {
-    if (value !== this._defaultBackHref) {
-      this._defaultBackHref = value;
-      this.canGoBack = this.canGoBack || isNotNil(value);
-      this.markForCheck();
-    }
-  }
-
-  get defaultBackHref(): string {
-    return this._defaultBackHref;
-  }
-
-  @Input() hasValidate = false;
-  @Input() hasClose = false;
-  @Input() hasSearch: boolean;
-  @Input() canGoBack: boolean;
-  @Input() canShowMenu = true;
-
-  @Output() onValidate = new EventEmitter<Event>();
-  @Output() onClose = new EventEmitter<Event>();
-  @Output() onValidateAndClose = new EventEmitter<Event>();
-  @Output() onBackClick = new EventEmitter<Event>();
-  @Output() onSearch = new EventEmitter<CustomEvent<ISearchbarSearchbarChangeEventDetail>>();
-
-  showSearchBar = false;
-
-  @ViewChild('searchbar', {static: true}) searchbar: IonSearchbar;
-  @ViewChild('menuToggle', {static: true}) menuToggle: IonMenuToggle;
-
-
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private navController: NavController,
-    private routerOutlet: IonRouterOutlet,
-    private cd: ChangeDetectorRef,
-    @Optional() @Inject(APP_PROGRESS_BAR_SERVICE) protected progressBarService: IProgressBarService
-  ) {
-
-    // Listen progress bar service mode
-    if (progressBarService) {
-      progressBarService.onProgressChanged
-        .pipe(
-          startWith(<ProgressBarMode>null), // none, by default
-          debounceTime(100), // wait 100ms, to group changes
-          // DEBUG
-          //tap((mode) => console.debug('[toolbar] Updating progressBarMode: ' + mode))
-
-          distinctUntilChanged()
-        ).subscribe(value => this._progressBarMode$.next(value));
-    }
-  }
-
-  ngOnInit() {
-    this.hasValidate = toBoolean(this.hasValidate, this.onValidate.observers.length > 0);
-    this.canGoBack = toBoolean(this.canGoBack, this.routerOutlet.canGoBack()
-      || isNotNilOrBlank(this._backHref)
-      || isNotNilOrBlank(this._defaultBackHref));
-    this.hasSearch = toBoolean(this.hasSearch, this.onSearch.observers.length > 0);
-  }
-
-  ngOnDestroy() {
-    this.onBackClick.complete();
-    this.onBackClick.unsubscribe();
-    this.onValidate.complete();
-    this.onValidate.unsubscribe();
-    this.onClose.complete();
-    this.onClose.unsubscribe();
-    this.onValidateAndClose.complete();
-    this.onValidateAndClose.unsubscribe();
-    this.onSearch.complete();
-    this.onSearch.unsubscribe();
-  }
-
-  async toggleSearchBar() {
-    this.showSearchBar = !this.showSearchBar;
-    if (this.showSearchBar && this.searchbar) {
-      setTimeout(() => {
-        this.searchbar.setFocus();
-        this.markForCheck();
-      }, 300);
-    }
-  }
-
-  doBackClick(event: Event) {
-
-    this.onBackClick.emit(event);
-
-    // Stop propagation, if need (can be cancelled by onBackClick observers)
-    if (event.defaultPrevented) return;
-
-    // Execute the back action
-    this.goBack();
-  }
-
-  async goBack(): Promise<boolean> {
-    console.debug('[toolbar] calling goBack()');
-    if (this._backHref) {
-      const replaceUrl = !this.routerOutlet.canGoBack();
-      // Relative href
-      if (this._backHref.startsWith('.')) {
-        this.navController.setDirection('back');
-        return this.router.navigate([this._backHref], {relativeTo: this.route, replaceUrl});
-      }
-      else {
-        return this.navController.navigateBack(this._backHref);
-      }
-    }
-    else if (this.routerOutlet.canGoBack()) {
-      return this.navController.pop();
-    }
-    else if (this._defaultBackHref) {
-
-      // Relative href
-      if (this._defaultBackHref.startsWith('.')) {
-        this.navController.setDirection('back');
-        return this.router.navigate([this._defaultBackHref], {relativeTo: this.route, replaceUrl: true});
-      }
-      else {
-        return this.navController.navigateBack(this._defaultBackHref);
-      }
-    }
-    else {
-      console.error('[toolbar] Cannot go back. Missing attribute \'defaultBackHref\' or \'backHref\'');
-      return false;
-    }
-  }
-
-  tapClose(event: HammerTapEvent) {
-    // DEV only
-    // console.debug("[toolbar] tapClose", event.tapCount);
-    if (this._validateTapCount > 0) return;
-
-    // Distinguish simple and double tap
-    this._closeTapCount = event.tapCount;
-    setTimeout(() => {
-      // Event is obsolete (a new tap event occur)
-      if (event.tapCount < this._closeTapCount) {
-        // Ignore event
-      }
-
-      // If event still the last tap event: process it
-      else {
-        this.onClose.emit(event.srcEvent || event);
-
-        // Reset tab count
-        this._closeTapCount = 0;
-      }
-    }, 500);
-  }
-
-  tapValidate(event: HammerTapEvent) {
-    // DEV only
-    //console.debug("[toolbar] tapValidate", event.tapCount);
-
-    if (this.onValidateAndClose.observers.length) {
-      this.onValidate.emit(event.srcEvent || event);
-    }
-
-    // Distinguish simple and double tap
-    else {
-      this._validateTapCount = event.tapCount;
-      setTimeout(() => {
-        // Event is obsolete (a new tap event occur)
-        if (event.tapCount < this._validateTapCount) {
-          // Ignore event
-        }
-
-        // If event still the last tap event: process it
-        else {
-          if (this._validateTapCount === 1) {
-            this.onValidate.emit(event.srcEvent || event);
-          }
-          else if (this._validateTapCount >= 2) {
-            this.onValidateAndClose.emit(event.srcEvent || event);
-          }
-
-          // Reset tab count
-          this._validateTapCount = 0;
-        }
-      }, HAMMER_PRESS_TIME+10);
-    }
-  }
-
-  protected ionSearchBarChanged(event: Event) {
-    this.onSearch.emit(event as CustomEvent<ISearchbarSearchbarChangeEventDetail>);
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-}

package/src/app/shared/types.ts

@@ -1,31 +0,0 @@
-import { ThemePalette } from '@angular/material/core';
-import { PredefinedColors } from '@ionic/core';
-
-export declare type KeyType = string | number;
-export declare type KeyValueType<T> = {[key in KeyType]: T};
-
-export declare type KeysEnum<T> = { [P in keyof Required<T>]: boolean };
-
-export declare interface ObjectMap<O = any> {
-  [key: string]: O;
-}
-
-export declare interface ObjectMapEntry<O = any> {
-  key: string;
-  value?: O;
-}
-
-export declare type PropertiesMap = ObjectMap<string>;
-
-export declare type Property = ObjectMapEntry<string>;
-
-export declare type PropertiesArray = Property[];
-
-export declare type AppColors = PredefinedColors | ThemePalette | string;
-
-export declare interface IconRef {
-  icon?: string; // An ion-icon name
-  matIcon?: string; // A mat icon
-  matSvgIcon?: string; // A mat SVG icon
-  color?: AppColors;
-}