@sumaris-net/ngx-components 18.12.0 → 18.12.1

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

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

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

@@ -1,64 +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.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

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

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

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

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

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