@sumaris-net/ngx-components 18.11.0 → 18.12.0

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

@@ -0,0 +1,161 @@
+import { IonicSafeString, ToastController } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
+import { 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';
+import { TOOLBAR_HEADER_ID } from '../toolbar/toolbar';
+
+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), {
+      // FIXME: 'ios' mode use bottom position, but this is not working
+      //mode: injector.get(Platform)?.is('ios') ? 'ios' : 'md',
+      ...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
+    let icon: string;
+    if (opts.type) {
+      switch (opts.type) {
+        case 'info':
+          cssArray.push('secondary');
+          break;
+        case 'warning':
+          cssArray.push('accent');
+          icon = 'warning';
+          break;
+        case 'error':
+          cssArray.push('danger');
+          icon = 'alert-circle';
+          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: ignore bottom position (stacked not working)
+      position !== 'bottom'
+    ) {
+      // 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
+      icon,
+      position,
+      duration: opts.showCloseButton ? 10000 : 4000,
+      positionAnchor: position === 'top' ? TOOLBAR_HEADER_ID : undefined, // If display on top, avoid to override the app-toolbar (if any)
+      swipeGesture: isEmptyArray(opts.buttons) ? 'vertical' : undefined, // Allow to swipe to dismiss, if no button
+      ...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;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+<ion-header>
+  <ion-toolbar [color]="color">
+    <ion-buttons slot="start">
+      @if (cancel.observed) {
+        <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

@@ -0,0 +1,64 @@
+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.observed);
+
+    // Ctrl+S
+    this._subscription.add(
+      this.hotkeys
+        .addShortcut({ keys: `${this.hotkeys.defaultControlKey}.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

@@ -0,0 +1,68 @@
+<ion-header [class]="class" [id]="id">
+  <ion-toolbar [color]="color">
+    <ion-buttons slot="start">
+      <!-- back button -->
+      @if (canGoBack) {
+        <ion-button class="back-button" (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 -->
+      @if (hasSearch) {
+        <ion-searchbar
+          #searchbar
+          animated
+          type="search"
+          [class.cdk-visually-hidden]="!showSearchBar"
+          show-cancel-button="always"
+          (ionChange)="ionSearchBarChanged($event)"
+          (ionCancel)="toggleSearchBar()"
+        ></ion-searchbar>
+
+        <!-- search button -->
+        @if (!showSearchBar) {
+          <ion-button (click)="toggleSearchBar()">
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        }
+      }
+
+      <!-- close button -->
+      @if (hasClose) {
+        <ion-button (tap)="tapClose($event)" class="visible-xs visible-sm visible-mobile">
+          <ion-icon slot="icon-only" name="close"></ion-icon>
+        </ion-button>
+      }
+
+      <!-- validate button -->
+      @if (hasValidate) {
+        <ion-button (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$ | push"></mat-progress-bar>
+</ion-header>

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

@@ -0,0 +1,18 @@
+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 { SharedPipesModule } from '../pipes/pipes.module';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { RxStateModule } from '../rx-state/rx-state.module';
+
+@NgModule({
+  imports: [CommonModule, IonicModule, TranslateModule, HammerModule, SharedPipesModule, RxStateModule, MatProgressBarModule, MatIconModule],
+  declarations: [ToolbarComponent, ModalToolbarComponent],
+  exports: [ToolbarComponent, ModalToolbarComponent],
+})
+export class SharedToolbarModule {}

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

@@ -0,0 +1,262 @@
+import {
+  booleanAttribute,
+  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;
+}
+
+export const TOOLBAR_HEADER_ID = 'app-toolbar-header';
+
+@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);
+  protected showSearchBar = false;
+
+  @Input() set progressBarMode(value: ProgressBarMode) {
+    if (this.progressBarService) return; // Skip if managed by the progress service
+    this.progressBarMode$.next(value);
+  }
+
+  get progressBarMode(): ProgressBarMode {
+    return this.progressBarMode$.value;
+  }
+
+  @Input() title = '';
+  @Input() color: AppColors = 'primary';
+  @Input() class = '';
+  @Input() id = TOOLBAR_HEADER_ID; // Used by
+
+  @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({ transform: booleanAttribute }) hasValidate = false;
+  @Input({ transform: booleanAttribute }) hasClose = false;
+  @Input({ transform: booleanAttribute }) hasSearch: boolean;
+  @Input({ transform: booleanAttribute }) canGoBack: boolean;
+  @Input({ transform: booleanAttribute }) 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>>();
+
+  @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.observed);
+    this.canGoBack = toBoolean(
+      this.canGoBack,
+      this.routerOutlet.canGoBack() || isNotNilOrBlank(this._backHref) || isNotNilOrBlank(this._defaultBackHref)
+    );
+    this.hasSearch = toBoolean(this.hasSearch, this.onSearch.observed);
+  }
+
+  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.observed) {
+      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

@@ -0,0 +1,44 @@
+import { ThemePalette } from '@angular/material/core';
+import { PredefinedColors } from '@ionic/core';
+import { Predicate } from '@angular/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<T = any> {
+  [key: string]: T;
+}
+
+export declare interface ObjectMapEntry<T = any> {
+  key: string;
+  value?: T;
+}
+
+export declare type PropertyMap<T = string> = ObjectMap<T>;
+
+/**
+ * Same as PropertyMap
+ * @deprecated Use PropertyMap instead
+ */
+export declare type PropertiesMap<T = string> = PropertyMap<T>;
+
+export declare type Property<T = string> = ObjectMapEntry<T>;
+
+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;
+}
+
+export declare type FilterFn<T> = Predicate<T>;
+export declare type FilterFnFactory<T, F> = (filter: F) => FilterFn<T>;
+
+export declare type Function<P, R> = (value: P) => R;
+export declare type BiFunction<P1, P2, R> = (v1: P1, v2: P2) => R;

package/src/app/shared/upload-file/testing/upload-file.testing.html

@@ -0,0 +1,30 @@
+<ion-toolbar color="primary">
+  <ion-title>File upload</ion-title>
+</ion-toolbar>
+
+<ion-content class="ion-padding">
+  <p>Popover examples:</p>
+
+  <ion-button (click)="showPopover($event, { uniqueFile: true })" color="tertiary">
+    <span translate>COMMON.BTN_IMPORT</span>
+    &nbsp;(unique file)
+  </ion-button>
+
+  <ion-button (click)="showPopover($event, { uniqueFile: false })" color="tertiary">
+    <span translate>COMMON.BTN_IMPORT</span>
+    &nbsp;(many files)
+  </ion-button>
+
+  <ion-button (click)="showPopover($event, { uniqueFile: false, instantUpload: true })" color="tertiary">
+    <span translate>COMMON.BTN_IMPORT</span>
+    &nbsp;(instant upload)
+  </ion-button>
+
+  <ion-button
+    (click)="showPopover($event, { uniqueFile: false, instantUpload: true, maxParallelUpload: 3 })"
+    color="tertiary"
+  >
+    <span translate>COMMON.BTN_IMPORT</span>
+    &nbsp;(max parallel upload)
+  </ion-button>
+</ion-content>