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

package/src/app/shared/material/autocomplete/material.autocomplete.ts

@@ -1,1022 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  forwardRef,
-  Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Output,
-  Renderer2,
-  ViewChild,
-  ViewEncapsulation,
-  ViewRef
-} from '@angular/core';
-import {ControlValueAccessor, FormGroupDirective, NG_VALUE_ACCESSOR, UntypedFormControl, Validators} from '@angular/forms';
-import {BehaviorSubject, isObservable, merge, Observable, Subject, Subscription, timer} from 'rxjs';
-import {debounceTime, distinctUntilChanged, filter, map, mergeMap, startWith, switchMap, takeUntil, tap} from 'rxjs/operators';
-import {FetchMoreFn, LoadResult, SuggestFn} from '../../services/entity-service.class';
-import {changeCaseToUnderscore, findParentWithClass, isBlankString, isNil, isNilOrBlank, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilString, toBoolean, toNumber} from '../../functions';
-import {focusInput, InputElement, selectInputRange} from '../../inputs';
-import {firstNotNilPromise} from '../../observables';
-import {DisplayFn, EqualsFn} from '../../form/field.model';
-import {FloatLabelType, MatFormFieldAppearance} from '@angular/material/form-field';
-import {MatSelect} from '@angular/material/select';
-import {MatAutocomplete, MatAutocompleteTrigger} from '@angular/material/autocomplete';
-import {fromScrollEndEvent} from '../../events';
-import {IonSearchbar, ModalController} from '@ionic/angular';
-import {slideInOutAnimation} from '../material.animations';
-import {isMobile} from '../../platforms';
-import {suggestFromArray} from '../../services';
-import {SearchbarChangeEventDetail} from '@ionic/core/dist/types/components/searchbar/searchbar-interface';
-import {MatAutocompleteFieldUtils} from './material.autocomplete.utils';
-import {MatAutocompleteFieldConfig} from './material.autocomplete.config';
-import {DOCUMENT} from '@angular/common';
-
-const noop = (_?: any) => { };
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'mat-autocomplete-field',
-  styleUrls: ['./material.autocomplete.scss'],
-  templateUrl: './material.autocomplete.html',
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    multi: true,
-    useExisting: forwardRef(() => MatAutocompleteField)
-  }],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class MatAutocompleteField implements OnInit, AfterViewInit, OnDestroy, InputElement, ControlValueAccessor {
-
-  private _onChangeCallback: (_: any) => void = noop;
-  private _onTouchedCallback: () => void = noop;
-
-  private _onFetchMoreCallback: FetchMoreFn<LoadResult<any>>;
-  private _implicitValue: any;
-  private _subscription = new Subscription();
-  private _itemsSubscription: Subscription;
-  private _openedSubscription: Subscription;
-  private _$filter = new BehaviorSubject<any>(undefined);
-  private _itemCount: number;
-  private _reload$ = new Subject<any>();
-
-  protected _readonly = false;
-  protected _tabindex: number;
-  protected _$inputItems = new BehaviorSubject<any[]>(undefined);
-  protected _$filteredItems = new BehaviorSubject<any[]>(undefined);
-  protected _displayValue = '';
-  protected _moreItemsCount: number;
-  protected _fetchMore$ = new EventEmitter<Event>();
-
-  @Input() equals: EqualsFn;
-  @Input() logPrefix = '[mat-autocomplete] ';
-  @Input() formControl: UntypedFormControl;
-  @Input() formControlName: string = null;
-  @Input() floatLabel: FloatLabelType;
-  @Input() appearance: MatFormFieldAppearance;
-  @Input() placeholder: string;
-  @Input() suggestFn: SuggestFn<any, any>;
-  @Input() required = false;
-  @Input() mobile: boolean;
-  @Input() clearable = false;
-  @Input() debounceTime: number = null;
-  @Input() displayWith: DisplayFn | null;
-  @Input() displayAttributes: string[];
-  @Input() displayColumnSizes: (number | 'auto' | undefined)[];
-  @Input() displayColumnNames: string[];
-  @Input() highlightAccent: boolean;
-  @Input() showAllOnFocus: boolean;
-  @Input() showPanelOnFocus: boolean;
-  @Input() autofocus: boolean = false;
-  @Input() config: MatAutocompleteFieldConfig;
-  @Input() i18nPrefix = 'REFERENTIAL.';
-  @Input() noResultMessage = 'COMMON.NO_RESULT';
-  @Input('class') classList: string;
-  @Input() panelWidth: string;
-  @Input() matAutocompletePosition: 'auto' | 'above' | 'below';
-  @Input() multiple: boolean;
-  @Input() fetchMoreThreshold: string = '15%';
-  @Input() suggestLengthThreshold: number = null;
-  @Input() showLoadingSpinner = true;
-  @Input() debug = false;
-  @Input() showSearchBar = true;
-  @Input() stickySearchBar = false;
-
-  @Output('click') clicked = new EventEmitter<MouseEvent>();
-  @Output('blur') blurred = new EventEmitter<FocusEvent>();
-  @Output('focus') focused = new EventEmitter<FocusEvent>();
-  @Output() dropButtonClick = new EventEmitter<Event>(true);
-  @Output('keydown.escape') keydownEscape = new EventEmitter<any>();
-  @Output('keyup.enter') keyupEnter = new EventEmitter<any>();
-
-  @ViewChild('matSelect') matSelect: MatSelect;
-  @ViewChild('ionSearchbar') ionSearchbar: IonSearchbar;
-  @ViewChild('matInputText') matInputText: ElementRef;
-  @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete;
-  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;
-
-
-
-  constructor(
-    protected cd: ChangeDetectorRef,
-    protected modalController: ModalController,
-    protected renderer: Renderer2,
-    @Inject(DOCUMENT) protected document: Document,
-    @Inject(ChangeDetectorRef) private viewRef: ViewRef,
-    @Optional() private formGroupDir: FormGroupDirective,
-  ) {
-  }
-
-  get itemCount(): number {
-    return this._itemCount;
-  }
-
-  get canFetchMore(): boolean {
-    return this._onFetchMoreCallback && this._moreItemsCount > 0;
-  }
-
-  @Input() set filter(value: any) {
-    if (value !== this._$filter.value) {
-      // DEBUG
-      //console.debug(this.logPrefix + " Setting filter:", value);
-      this._$filter.next(value);
-    }
-  }
-
-  get filter(): any {
-    return this._$filter.value;
-  }
-
-  @Input() set readonly(value: boolean) {
-    this._readonly = value;
-    this.markForCheck();
-  }
-
-  get readonly(): boolean {
-    return this._readonly;
-  }
-
-  @Input() set tabindex(value: number) {
-    this._tabindex = value;
-    this.markForCheck();
-  }
-
-  get tabindex(): number {
-    return this._tabindex;
-  }
-
-  @Input() set items(value: Observable<any[]> | any[]) {
-    // Remove previous subscription on items, (if exits)
-    if (this._itemsSubscription) {
-      console.warn(this.logPrefix + ' Items received twice !');
-      this._subscription.remove(this._itemsSubscription);
-      this._itemsSubscription.unsubscribe();
-    }
-
-    if (isObservable(value)) {
-      this._itemsSubscription = value.subscribe(v => this._$inputItems.next(v));
-      this._subscription.add(this._itemsSubscription);
-    } else {
-      if (value !== this._$inputItems.value) {
-        this._$inputItems.next(value as any[]);
-      }
-    }
-  }
-
-  get items(): Observable<any[]> | any[] {
-    return this._$inputItems;
-  }
-
-  get value(): any {
-    return this.formControl.value;
-  }
-
-  get disabled(): boolean {
-    return this._readonly || this.formControl.disabled;
-  }
-
-  get enabled(): boolean {
-    return !this._readonly && this.formControl.enabled;
-  }
-
-  get loading(): boolean {
-    return isNil(this._$filteredItems.value);
-  }
-
-  get desktop(): boolean {
-    return !this.mobile && !this.multiple;
-  }
-
-  ngOnInit() {
-    this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName) as UntypedFormControl;
-    if (!this.formControl) throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-autocomplete-field>.');
-
-    // Configuration from config object
-    if (this.config) {
-      this.suggestFn = this.suggestFn || this.config.suggestFn;
-      if (!this.suggestFn && this.config.items) {
-        this.items = this.config.items;
-      }
-      this.filter = this.filter || this.config.filter;
-      this.displayAttributes = this.displayAttributes || this.config.attributes;
-      this.displayColumnSizes = this.displayColumnSizes || this.config.columnSizes;
-      this.displayColumnNames = this.displayColumnNames || this.config.columnNames;
-      this.displayWith = this.displayWith || this.config.displayWith;
-      this.equals = this.equals || this.config.equals;
-      this.multiple = toBoolean(this.multiple, this.config.multiple);
-      this.mobile = toBoolean(this.mobile, this.config.mobile);
-      this.suggestLengthThreshold = toNumber(this.suggestLengthThreshold, this.config.suggestLengthThreshold);
-      this.showAllOnFocus = toBoolean(this.showAllOnFocus, this.config.showAllOnFocus);
-      this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, this.config.showPanelOnFocus);
-      this.classList = this.classList || this.config.class;
-      this.debounceTime = toNumber(this.debounceTime, this.config.debounceTime);
-      this.highlightAccent = toBoolean(this.highlightAccent, toBoolean(this.config.highlightAccent));
-    }
-
-    // Default values
-    this.required = isNotNilBoolean(this.required) ? this.required : (this.formControl.validator === Validators.required || isBlankString(this.required));
-    this.multiple = toBoolean(this.multiple, false);
-    this.mobile = isNotNil(this.mobile) ? this.mobile : (this.multiple || isMobile(window));
-    this.displayAttributes = this.displayAttributes || this.filter?.attributes || ['label', 'name'];
-    this.displayWith = this.displayWith || MatAutocompleteFieldUtils.createDisplayFn(this.displayAttributes, this.multiple);
-    this.equals = this.equals || MatAutocompleteFieldUtils.defaultEquals;
-
-    this.displayColumnSizes = this.displayColumnSizes
-      // if only column: auto size
-      || (this.displayAttributes.length === 1 && [undefined])
-      // Computed column size:
-      // - if label then col size = 2
-      // - if rankOrder then col size = 1
-      // - ese => auto size
-      || this.displayAttributes.map(attr =>
-        attr && (attr.endsWith('label') ? 3
-          : (attr.endsWith('rankOrder') ? 2
-            : undefined)));
-    this.displayColumnNames = this.displayAttributes.map((attr, index) => this.displayColumnNames && this.displayColumnNames[index] ||
-      (this.i18nPrefix + changeCaseToUnderscore(attr).toUpperCase()));
-    const classList = this.classList?.split(' ');
-    this.panelWidth = this.panelWidth || (classList && (
-      (classList.includes('min-width-medium') && '300px')
-      || (classList.includes('min-width-large') && '400px')
-      || (classList.includes('min-width-xlarge') && '450px')
-      || (classList.includes('min-width-80vw') && '80vw')
-      || (classList.includes('mat-autocomplete-panel-full-size') && '100vw')
-    ));
-    this.suggestLengthThreshold = this.suggestLengthThreshold || 0;
-    this.showAllOnFocus = toBoolean(this.showAllOnFocus, this.mobile && this.suggestLengthThreshold <= 0);
-    this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, true);
-    this.debounceTime = toNumber(this.debounceTime, this.mobile ? 650 : 250);
-    this.highlightAccent = toBoolean(this.highlightAccent, false);
-    this.matAutocompletePosition = this.matAutocompletePosition || 'auto';
-
-    // No suggestFn: filter on the given items
-    if (!this.suggestFn) {
-      const suggestFromArrayFn: SuggestFn<any, any> = async (value, filter) => {
-        // DEBUG
-        //console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
-
-        return suggestFromArray(this._$inputItems.value, value, {
-          searchAttributes: this.displayAttributes,
-          ...filter
-        });
-      };
-      // Wait (once) that items are loaded, then call suggest from array fn
-      this.suggestFn = async (value, filter) => {
-        if (isNil(this._$inputItems.value)) {
-          // DEBUG
-          //console.debug(this.logPrefix + " Waiting items to be set...");
-
-          await firstNotNilPromise(this._$inputItems);
-
-          // DEBUG
-          //console.debug(this.logPrefix + " Received items:", this.inputItems$.value);
-        }
-        this.suggestFn = suggestFromArrayFn;
-        return this.suggestFn(value, filter); // Loop
-      };
-    }
-    // Suggest + mobile
-    // => Manually fill input items, from the given suggest function
-    else if (this.mobile || this.multiple) {
-      /*this._subscription.add(
-        this._$filter.pipe(
-          startWith<any, any>(this.filter),
-          debounceTime(250),
-          filter(_ => this.suggestLengthThreshold <= 0),
-          switchMap((filter) => this.suggest('*', filter))
-        )
-        .subscribe(items => this.$inputItems.next(items))
-      );*/
-    }
-
-    // Send value to suggest when :
-    // - is nil and '*', and no min length threshold
-    // - is not nil and not a string type (e.g. object)
-    // - is not nil and is a string, and has enough character
-    const thresholdFilterFn = (value) => this.suggestLengthThreshold <= 0 || (
-      isNotNil(value) && (
-        !(typeof value === 'string')
-        || (value !== '*' && value.trim().length >= this.suggestLengthThreshold)
-      )
-    );
-
-    const filteredItemsChanges = merge(
-
-      // Reload event (no distinctUntilChanged() pipe, to force reload even if same value)
-      this._reload$
-        .pipe(
-          filter(() => this.enabled),
-          filter(thresholdFilterFn),
-          tap(_ => this.showLoadingSpinner && this.markAsLoading())
-        ),
-
-      // Search text (no distinctUntilChanged() because of the debounceTime() pipe)
-      this.formControl.valueChanges
-        .pipe(
-          filter(value => this.enabled && isNotNilString(value)),
-          // Mark as loading (to show loading spinner) - as soon as possible, and before debounceTime
-          tap(_ => this.showLoadingSpinner && this.markAsLoading()),
-          // Filter if not enough character
-          filter(value => {
-            if ((value?.length || 0) < this.suggestLengthThreshold) {
-              // Update display value, to enable the message "not enough characters"
-              this._displayValue = value;
-              return false;
-            }
-            return true;
-          }),
-          // Wait a debounce time
-          debounceTime(this.debounceTime)
-          // DEBUG
-          //,tap((value) => this.debug && console.debug(this.logPrefix + ' Search text changes:', value))
-        ),
-
-      // Object set: use it (no distinctUntilChanged() pipe need)
-      this.formControl.valueChanges
-        .pipe(
-          startWith<any, any>(this.formControl.value),
-          filter(value => (isNotNil(value) && typeof value === 'object')),
-          tap(value => {
-            // DEBUG
-            //if (this.debug) console.debug(this.logPrefix + ' control object changes:', value);
-
-            // Update the display value (if need)
-            const displayValue = this.displayWith(value) || '';
-            if (this._displayValue !== displayValue) {
-              this._displayValue = displayValue;
-
-              // Apply to the input[type=text] field
-              if (this.matInputText?.nativeElement) {
-                this.matInputText.nativeElement.value = this._displayValue;
-              }
-              this.markForCheck();
-            }
-          }),
-
-          // If multiple: do not recompute items (only for the first time, when loading)
-          // when formControl value changes
-          filter(() => !this.multiple || this.loading),
-
-          map(value => this.showAllOnFocus && this.suggestLengthThreshold <= 0 ? '*' : value)
-          // DEBUG
-          //,tap(value => this.debug && console.debug(this.logPrefix + ' Received an control object value: ', value))
-        ),
-
-      // Merge some observables, with a common distinctUntilChanged() pipe
-      merge(
-        // On dropdown button click (no debounceTime)
-        this.dropButtonClick
-          .pipe(
-            filter(event => (!event || !event.defaultPrevented))
-          ),
-        // Focus or click => Load all (no debounceTime)
-        merge(this.focused, this.clicked),
-        // DEBUG
-        //.pipe(tap(_ => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event'))),
-        // Input items or filter changes
-        merge(this._$inputItems, this._$filter)
-          // DEBUG
-          .pipe(
-            filter(_ => !this.loading)
-            //,tap(_ => this.debug && console.debug(this.logPrefix + ' Received $inputItems or filter event'))
-          )
-      )
-        .pipe(
-          filter(_ => this.enabled),
-          map(_ => this.showAllOnFocus ? '*' : this.formControl.value),
-          // Distinguish changes
-          distinctUntilChanged((v1, v2) =>
-            // If loading (not loaded yet), simulate that value changed to force load
-            this.loading ? false : (v1 === v2 || this.equals(v1, v2))
-          ),
-          // Make sure there is enough characters
-          filter(thresholdFilterFn)
-          // DEBUG
-          //,tap(value => this.debug && console.debug(this.logPrefix + ' Received update event from observables: ', value))
-        )
-    )
-
-      .pipe(
-        // Suggest values
-        mergeMap(value => this.suggest(value, this.filter)),
-        // DEBUG
-        //tap(items => this.debug && console.debug(this.logPrefix + ' Received from suggest: ', items)),
-
-        // Store implicit value (will use it onBlur if not other value selected)
-        tap(items => !this.multiple && !this.mobile && this.updateImplicitValue(items))
-      );
-
-    // Fetch more events
-    const fetchMoreItemsChanges = this._fetchMore$
-      .pipe(
-        tap(event => event?.preventDefault()), // Avoid to close the mat-select
-        filter(() => this.canFetchMore),
-        mergeMap(() => this.fetchMore()),
-
-        // DEBUG
-        //tap(moreItems => console.debug(this.logPrefix + ' Received from fetch More: ', moreItems)),
-
-        // Concat to existing items
-        map(moreItems => (this._$filteredItems.value || []).concat(moreItems))
-      );
-
-    // Update filtered items
-    this._subscription.add(
-      merge(
-        this._$inputItems,
-
-        // Update items events
-        filteredItemsChanges,
-
-        // Fetch more events
-        fetchMoreItemsChanges
-      )
-        .subscribe(items => {
-          // Make sure control value is inside (mat-select)
-          if (items && (this.mobile || this.multiple)) {
-            const value = this.formControl.value;
-
-            // If form value is missing: append to list
-            if (isNotNil(value)) {
-              if (this.multiple && Array.isArray(value)) {
-                items = items.concat(
-                  value.filter(v => items.findIndex(item => this.equals(item, v)) === -1)
-                );
-              } else if (typeof value === 'object' && items.findIndex(item => this.equals(item, value)) === -1) {
-                items = items.concat(value);
-              }
-            }
-          }
-          // Emit items
-          this._$filteredItems.next(items);
-        }));
-
-    // Applying implicit value, on blur
-    this._subscription.add(
-      this.blurred
-        .pipe(
-          // Skip if multiple (no implicit value) or disable
-          filter(_ => !this.multiple && !this.mobile && this.enabled),
-          // DEBUG
-          //,tap(_ => this.debug && console.debug(this.logPrefix + ' Received blurred event')),
-          map(_ => this.formControl.value)
-        )
-        .subscribe(value => {
-          // When leave component without object, use implicit value if :
-          // - an explicit value
-          // - field is not empty (user fill something)
-          // - OR field empty but is required
-          if (this._implicitValue && ((this.required && isNilOrBlank(value)) || (isNotNilOrBlank(value) && typeof value !== 'object'))) {
-            this.writeValue(this._implicitValue);
-            this.formControl.markAsPending({ emitEvent: false, onlySelf: true });
-            this.formControl.updateValueAndValidity({ emitEvent: false, onlySelf: true });
-            this.checkIfTouched();
-            this._$filteredItems.next([this._implicitValue]);
-          } else if (isNilOrBlank(value)) {
-            this.writeValue(null);
-            this.formControl.markAsPending({ emitEvent: false, onlySelf: true });
-            this.formControl.updateValueAndValidity({ emitEvent: false, onlySelf: true });
-            this.checkIfTouched();
-            this.markAsLoading();
-          }
-          this._implicitValue = null; // reset the implicit value
-          this.closePanel(); // Clone panel
-        }));
-
-    // Listen form control status change
-    this._subscription.add(
-      this.formControl.statusChanges
-        .pipe(
-          distinctUntilChanged()
-        )
-        // Update component state
-        .subscribe(() => this.checkIfTouched())
-    );
-
-    this._subscription.add(
-      this.keydownEscape.subscribe(event => {
-        if (this.isOpen) {
-          // Avoid form or page to manage escape event
-          event?.stopPropagation();
-          event?.preventDefault();
-
-          // DEBUG
-          //console.debug(this.logPrefix + " Closing the panel (keydown.escape)");
-
-          this.closePanel();
-        }
-      })
-    );
-  }
-
-  ngAfterViewInit() {
-    this._fixMatSelectPositionAndSearchbar();
-  }
-
-  ngOnDestroy(): void {
-    this._subscription.unsubscribe();
-    if (this._itemsSubscription) {
-      this._itemsSubscription.unsubscribe();
-    }
-    if (this._openedSubscription) {
-      this._openedSubscription.unsubscribe();
-    }
-    this._$inputItems.complete();
-    this._$inputItems.unsubscribe();
-    this._$filteredItems.complete();
-    this._$filteredItems.unsubscribe();
-    this._reload$.complete();
-    this._$filter.complete();
-
-    this.dropButtonClick.complete();
-    this.clicked.complete();
-    this.blurred.complete();
-    this.focused.complete();
-    this.keydownEscape.complete();
-    this.keyupEnter.complete();
-    this._fetchMore$.complete();
-
-    this._implicitValue = undefined;
-    this.formControl = null;
-    this.displayWith = null;
-    this.equals = null;
-    this.suggestFn = null;
-    this._$filteredItems = null;
-    this.config = null;
-    this.classList = null;
-
-    this._onChangeCallback = null;
-    this._onTouchedCallback = null;
-    this._onFetchMoreCallback = null;
-
-    // Destroy the 'autocomplete' instance, to avoid memory leak
-    if (this.autocomplete) {
-      this.autocomplete.ngOnDestroy();
-    }
-  }
-
-  /**
-   * Allow to reload content. Useful when filter has been changed but not detected
-   */
-  reloadItems(value?: any) {
-    // DEBUG
-    //if (this.debug) console.debug(this.logPrefix + " Asking to reloadItems()");
-    // Force a refresh
-    this._reload$.next(value || (this.showAllOnFocus && this.suggestLengthThreshold <= 0 ? '*' : this.formControl.value));
-
-    // Clear the search bar (if hidden)
-    if (this.mobile && !this.matSelect.panelOpen && this.ionSearchbar) {
-      this.ionSearchbar.value = null;
-    }
-  }
-
-  writeValue(value: any): void {
-    // DEBUG
-    // if (this.debug) console.debug(this.logPrefix + ' Writing value: ', value);
-
-    if (value !== this.formControl.value) {
-      this.formControl.patchValue(value, { emitEvent: false });
-      this._displayValue = this.displayWith(value);
-      this._onChangeCallback(value);
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this._onChangeCallback = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this._onTouchedCallback = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (isDisabled && this.autocomplete?.isOpen) {
-      this.closePanel();
-    }
-    this.cd.markForCheck();
-  }
-
-  focus() {
-    if (this.mobile) {
-      this.matSelect.focus();
-    } else {
-      focusInput(this.matInputText);
-    }
-  }
-
-  filterInputTextFocusEvent(event: FocusEvent) {
-    if (!event || event.defaultPrevented) return;
-
-    // Ignore event from mat-option
-    if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.tagName === 'MAT-OPTION') {
-      event.preventDefault();
-      if (event.stopPropagation) event.stopPropagation();
-      event.returnValue = false;
-
-      // DEBUG
-      //if (this.debug) console.debug(this.logPrefix + ' Cancelling focus event');
-
-      return false;
-    }
-
-    // DEBUG
-    //if (this.debug) console.debug(this.logPrefix + ' Select input content');
-    const hasContent = isNotNilOrBlank((event.target as any)?.value);
-
-    // If combo is empty, or if has content but should force to show panel on focus
-    if (!hasContent || this.showPanelOnFocus || this.showAllOnFocus) {
-      // DEBUG
-      //if (this.debug) console.debug(this.logPrefix + ' Emit focus event');
-
-      this.focused.emit();
-      return true;
-    }
-    return false;
-  }
-
-  protected filterInputTextBlurEvent(event: FocusEvent) {
-    if (!event || event.defaultPrevented) return;
-
-    // Ignore event from mat-option
-    if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.tagName === 'MAT-OPTION') {
-      event.preventDefault();
-      if (event.stopPropagation) event.stopPropagation();
-      event.returnValue = false;
-
-      // DEBUG
-      //if (this.debug) console.debug(this.logPrefix + " Cancelling blur event");
-
-      return false;
-    }
-
-    // DEBUG
-    //if (this.debug) console.debug(this.logPrefix + ' Blur: move caret to the beginning');
-
-    // Move caret to the beginning (fix issue IMAGINE-469)
-    selectInputRange(event.target as any, 0, 0);
-
-    this.blurred.emit(event);
-    return true;
-  }
-
-  protected ionSearchBarChanged(event: Event) {
-    if (!event || event.defaultPrevented || !this.matSelect.panelOpen) return;
-    event.preventDefault();
-    event.stopPropagation();
-
-    // DEBUG
-    //console.debug(this.logPrefix + " Received <ion-searchbar> changes", );
-
-    // Get the value to search
-    const value = (event as CustomEvent<SearchbarChangeEventDetail>)?.detail.value;
-
-    // Update the display value (in the visible form control)
-    if (!this.multiple) {
-      this._displayValue = value;
-    }
-
-    // Mark component as loading
-    this.markAsLoading();
-
-    // Reload items
-    this.reloadItems(value);
-
-    // TODO Find a way to avoid mat-select to give focus to an option, when typing
-    /*if (this.multiple) {
-      this.matSelect._elementRef;
-    }*/
-  }
-
-  filterMatSelectFocusEvent(event: FocusEvent) {
-    if (!event || event.defaultPrevented) return;
-    // DEBUG
-    console.debug(this.logPrefix + " Received <mat-select> focus event", event);
-    this.focused.emit(event);
-  }
-
-  filterMatSelectBlurEvent(event: FocusEvent) {
-    if (!event || event.defaultPrevented) return;
-
-    // DEBUG
-    // console.debug(this.logPrefix + " Received <mat-select> blur event", event);
-
-
-    if (event.relatedTarget instanceof HTMLElement && (
-      // Ignore event from mat-option
-      (event.relatedTarget.tagName === 'MAT-OPTION')
-      || (event.relatedTarget.tagName === 'INPUT') && event.relatedTarget.classList.contains('searchbar-input'))) {
-      event.preventDefault();
-      if (event.stopPropagation) event.stopPropagation();
-      event.returnValue = false;
-      // DEBUG
-      // console.debug(this.logPrefix + " Cancelling <mat-select> blur event");
-      return false;
-    }
-
-    this.blurred.emit(event);
-    return true;
-  }
-
-  clearValue(event: Event) {
-    this.writeValue(null);
-    event.stopPropagation();
-    if (this.ionSearchbar) {
-      this.ionSearchbar.value = null;
-    }
-    this.markAsLoading();
-  }
-
-  _initAutocompleteInfiniteScroll(threshold?: string) {
-    if (!this.autocomplete) return; // Skip
-
-    // DEBUG
-    //console.debug(this.logPrefix + ' Init autocomplete scroll listener');
-
-    if (this._openedSubscription) {
-      this._openedSubscription.unsubscribe();
-      this._subscription.remove(this._openedSubscription);
-    }
-
-    const opened$: Observable<any> = this.autocomplete._isOpen
-      ? timer(0)
-      : this.autocomplete.opened.pipe(debounceTime(200));
-    const scrollEnd$ = opened$
-      .pipe(
-        map((_) => this.getAutocompletePanel()),
-        filter(isNotNil),
-        switchMap((panel) => fromScrollEndEvent(panel, threshold)),
-        takeUntil(this.autocomplete.closed)
-      );
-
-    // Trigger fetch more, end end scroll reached
-    this._openedSubscription = scrollEnd$
-      .subscribe(() => this._fetchMore$.emit());
-
-    // Register subscription
-    this._subscription.add(this._openedSubscription);
-  }
-
-  _initMatSelectInfiniteScroll(threshold?: string) {
-    if (!this.matSelect) return; // Skip
-
-    // DEBUG
-    //console.debug(this.logPrefix + ' Init mat-select scroll listener');
-
-    if (this._openedSubscription) {
-      this._openedSubscription.unsubscribe();
-      this._subscription.remove(this._openedSubscription);
-    }
-
-    const opened$: Observable<any> = this.matSelect.panelOpen
-      ? timer(0)
-      : this.matSelect._openedStream.pipe(debounceTime(200));
-    const scrollEnd$ = opened$
-      .pipe(
-        map((_) => this.getMatSelectPanel()),
-        filter(isNotNil),
-        switchMap((panel) => fromScrollEndEvent(panel, threshold)),
-        takeUntil(this.matSelect._closedStream)
-      );
-
-    // Trigger fetch more, end end scroll reached
-    this._openedSubscription = scrollEnd$
-      .pipe(
-        filter(_ => this._moreItemsCount > 0)
-      )
-      .subscribe(() => this._fetchMore$.emit());
-
-    // Register subscription
-    this._subscription.add(this._openedSubscription);
-  }
-
-  get isOpen(): boolean {
-    return (!this.mobile && this.autocomplete?.isOpen)
-      || (this.matSelect?.panelOpen)
-      || false;
-  }
-
-  closePanel() {
-    if (this.autocomplete?.isOpen) {
-      this.autocompleteTrigger?.closePanel();
-      return;
-    }
-    if (this.matSelect?.panelOpen) {
-      this.matSelect?.close();
-    }
-  }
-
-  /* -- private method -- */
-
-  private async suggest(value: any, filter?: any): Promise<any[]> {
-    // Call suggestion function
-    let res = await this.suggestFn(value, filter);
-
-    // DEBUG
-    //if (this.debug) console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
-
-    if (!res) {
-      this._itemCount = 0;
-      this._onFetchMoreCallback = undefined;
-      this._moreItemsCount = 0;
-      res = [];
-    }
-    else if (Array.isArray(res)) {
-      res = res as any[];
-      this._itemCount = res?.length || 0;
-      this._onFetchMoreCallback = undefined;
-      this._moreItemsCount = 0;
-    }
-    else {
-      const { data, total, fetchMore } = res as LoadResult<any>;
-      this._itemCount = toNumber(total, data && data.length || 0);
-      this._onFetchMoreCallback = fetchMore;
-      this._moreItemsCount = fetchMore && (this._itemCount - data.length) || 0;
-      res = data;
-    }
-
-    // DEBUG
-    //if (this.debug) console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
-
-    return res;
-  }
-
-  private async fetchMore(): Promise<any[]> {
-    if (!this._onFetchMoreCallback) return [];
-
-    // Save then remove fetch function (to avoid multi-call)
-    const fetchMoreFn = this._onFetchMoreCallback;
-    this._onFetchMoreCallback = undefined;
-
-    const { data, total, fetchMore } = await fetchMoreFn();
-    this._itemCount = total || this._itemCount;
-    this._onFetchMoreCallback = fetchMore;
-    this._moreItemsCount = Math.max(0, this._moreItemsCount - data.length); // Borne min = 0
-    return data;
-  }
-
-  private updateImplicitValue(items: any[]) {
-    if (!this.multiple) {
-      // Store implicit value (will use it onBlur if not other value selected)
-      if (items && items.length === 1) {
-        this._implicitValue = items[0];
-        //this.formControl.setErrors(null);
-      } else {
-        this._implicitValue = undefined;
-      }
-    }
-  }
-
-  private checkIfTouched() {
-    if (this.formControl.touched) {
-      this.cd.markForCheck();
-      this._onTouchedCallback();
-    }
-  }
-
-  private getAutocompletePanel(): HTMLElement {
-    const ele = this.autocomplete?.options.last?._getHostElement().parentElement;
-    if (!ele) {
-      // DEBUG
-      console.warn(this.logPrefix + ' Unable to find the autocomplete div...');
-    }
-    return ele;
-  }
-
-  private getMatSelectPanel(): HTMLElement {
-    const ele = this.matSelect.options.last?._getHostElement().parentElement;
-    if (!ele) {
-      // DEBUG
-      console.warn(this.logPrefix + ' Unable to find the mat-select container...');
-    }
-    return ele;
-  }
-
-  private markForCheck() {
-    this.cd.markForCheck();
-  }
-
-  protected markAsLoading() {
-    if (this._$filteredItems.value) {
-      this._$filteredItems.next(undefined);
-      this._itemCount = undefined;
-      this._implicitValue = undefined;
-      this._onFetchMoreCallback = undefined;
-      this._moreItemsCount = 0;
-      this.markForCheck();
-    }
-  }
-
-  private _fixMatSelectPositionAndSearchbar() {
-    if (!this.matSelect) return;
-
-    // Hide the panel (will be show when ready)
-    this.matSelect.panelClass = 'cdk-visually-hidden';
-
-    let subscription: Subscription;
-    this._subscription.add(
-      this.matSelect.openedChange
-        .subscribe(async (open) => {
-
-          if (open) {
-            const panelElement = this.matSelect.panel.nativeElement as HTMLElement;
-            const overlayPane = findParentWithClass(panelElement, 'cdk-overlay-pane');
-
-            // Fix left position
-            // FIXME when search bar enable, the keyboard show readd the transformX,
-            this._fixMatSelectPanelPosition(overlayPane);
-
-            // Fix overlay, for searchbar
-            if (this.showSearchBar) {
-              subscription = await this._fixSearchbarOverlay(panelElement, overlayPane);
-              this._subscription.add(subscription);
-            }
-
-            // Show the panel
-            this.renderer.removeClass(panelElement, 'cdk-visually-hidden');
-
-          }
-          // ON close
-          else if (subscription) {
-            subscription.unsubscribe();
-            this._subscription.remove(subscription);
-            subscription = null;
-          }
-        }
-      )
-    );
-  }
-
-  private _fixMatSelectPanelPosition(overlayPane: HTMLElement) {
-    if (!overlayPane) return;
-    // Remove the unwanted default translateX
-    this.renderer.setStyle(overlayPane, 'transform',
-      overlayPane.style.transform
-        .split(' ')
-        .filter((prop) => !prop.match(/^translateX/))
-        .join(' ')
-    );
-  }
-
-  /**
-   * Hack : if we are in a IonModal, it's necessary to move the CdkOverlay container
-   *     in the IonModal to might keep focus in IonSearchbar.
-   * @param panelElement
-   * @private
-   */
-  private async _fixSearchbarOverlay(panelElement: HTMLElement, overlayPane: HTMLElement): Promise<Subscription|undefined> {
-    if (!this.matSelect || !this.ionSearchbar) return;
-
-    const modalElement = await this.modalController.getTop();
-    if (!modalElement) return; // No modal: skip
-
-    // Get the CDK overlay container
-    const overlayContainer = findParentWithClass(panelElement, 'cdk-overlay-container');
-    if (!overlayContainer) return;
-
-    // DEBUG
-    console.debug(`${this.logPrefix} moving the "cdk-overlay" container from the "body" to the "ion-modal" container`);
-
-    const originalParent = overlayContainer.parentElement;
-    this.renderer.appendChild(modalElement, overlayContainer);
-
-    const shiftLeft = (this.document.defaultView.innerWidth - modalElement.firstElementChild.getBoundingClientRect().width) / 2;
-    const shiftTop = (this.document.defaultView.innerHeight - modalElement.firstElementChild.getBoundingClientRect().height) / 2;
-
-    this.renderer.setStyle(overlayPane, 'margin-top', `-${shiftTop}px`);
-    this.renderer.setStyle(overlayPane, 'margin-left', `-${shiftLeft}px`);
-
-    // Return the reverse function, to replace the container in body
-    return new Subscription(() => {
-      // DEBUG
-      console.debug(`${this.logPrefix} moving the "cdk-overlay" container from the "ion-modal" to the "body" container`);
-
-      this.renderer.appendChild(originalParent/*this.document.body*/, overlayContainer);
-    });
-  }
-}