@sumaris-net/ngx-components 1.6.2 → 1.6.6

package/fesm2015/sumaris-net.ngx-components.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Input, HostBinding, Output, ViewChild, Pipe, Injectable, Directive, Inject, NgModule, ElementRef, ViewChildren, HostListener, ComponentFactoryResolver, ApplicationRef, Injector, Renderer2 } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Input, Output, ViewChild, Pipe, Injectable, Directive, Inject, NgModule, ElementRef, ViewChildren, HostListener, ComponentFactoryResolver, ApplicationRef, Injector, Renderer2, ViewEncapsulation } from '@angular/core';
 import * as i1$3 from '@angular/common';
 import { CommonModule, DOCUMENT, Location } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -36,7 +36,7 @@ import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUT
 import { __awaiter, __decorate } from 'tslib';
 import * as i1$6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormGroupDirective, AbstractControl, FormGroup, FormArray, FormControl, ReactiveFormsModule, Validators, FormBuilder } from '@angular/forms';
-import { timer, merge, fromEvent, Subscription, BehaviorSubject, Subject, isObservable, noop as noop$8, Observable, defer, of, from, combineLatest, EMPTY } from 'rxjs';
+import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, noop as noop$9, Observable, defer, of, from, combineLatest, EMPTY } from 'rxjs';
 import { filter, first, map, takeUntil, switchMap, startWith, debounceTime, takeWhile, tap, distinctUntilChanged, mergeMap, catchError, throttleTime, skip } from 'rxjs/operators';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -976,11 +976,11 @@ class MatAutocompleteConfigHolder {
         const attributesOrFn = attributes.map((a, index) => typeof a === 'function' && options.attributes[index] || a);
         const filter = Object.assign({ searchAttribute: attributes.length === 1 ? attributes[0] : undefined, searchAttributes: attributes.length > 1 ? attributes : undefined }, options.filter);
         const displayWith = options.displayWith || ((obj) => obj && joinPropertiesPath(obj, attributes));
-        const compareWith = options.compareWith || ((o1, o2) => o1 && o2 && o1.id === o2.id);
+        const equals = options.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
         const config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn,
             filter,
             displayWith,
-            compareWith });
+            equals });
         this.fields[fieldName] = config;
         return config;
     }
@@ -991,27 +991,14 @@ class MatAutocompleteConfigHolder {
         return this.fields[fieldName] || this.add(fieldName);
     }
 }
-const DEFAULT_VALUE_ACCESSOR$6 = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => MatAutocompleteField),
-    multi: true
-};
-const noop$7 = () => { };
-const ɵ0$a = noop$7;
+const noop$8 = (_) => { };
+const ɵ0$b = noop$8;
 class MatAutocompleteField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$7;
-        this._onTouchedCallback = noop$7;
-        this._subscription = new Subscription();
-        this._filter$ = new BehaviorSubject(undefined);
-        this._reload$ = new Subject();
-        this._readonly = false;
-        this.$inputItems = new BehaviorSubject(undefined);
-        this.$filteredItems = new BehaviorSubject(undefined);
-        this.displayValue = '';
-        this._fetchMore$ = new EventEmitter();
+        this._onChangeCallback = noop$8;
+        this._onTouchedCallback = noop$8;
         this.logPrefix = '[mat-autocomplete] ';
         this.formControlName = null;
         this.required = false;
@@ -1024,13 +1011,21 @@ class MatAutocompleteField {
         this.fetchMoreThreshold = '15%';
         this.suggestLengthThreshold = null;
         this.showLoadingSpinner = true;
-        this.animationsDisabled = true;
-        this.onClick = new EventEmitter();
-        this.onBlur = new EventEmitter();
-        this.onFocus = new EventEmitter();
-        this.onDropButtonClick = new EventEmitter(true);
-        this.onKeydownEscape = new EventEmitter();
-        this.onKeyupEnter = new EventEmitter();
+        this.debug = false;
+        this.clicked = new EventEmitter();
+        this.blurred = new EventEmitter();
+        this.focused = new EventEmitter();
+        this.dropButtonClick = new EventEmitter(true);
+        this.keydownEscape = new EventEmitter();
+        this.keyupEnter = new EventEmitter();
+        this._readonly = false;
+        this.$inputItems = new BehaviorSubject(undefined);
+        this.$filteredItems = new BehaviorSubject(undefined);
+        this.displayValue = '';
+        this._fetchMore$ = new EventEmitter();
+        this._subscription = new Subscription();
+        this._$filter = new BehaviorSubject(undefined);
+        this._reload$ = new Subject();
     }
     get itemCount() {
         return this._itemCount;
@@ -1039,14 +1034,14 @@ class MatAutocompleteField {
         return this._onFetchMoreCallback && this._moreItemsCount > 0;
     }
     set filter(value) {
-        if (value !== this._filter$.value) {
+        if (value !== this._$filter.value) {
             // DEBUG
             //console.debug(this.logPrefix + " Setting filter:", value);
-            this._filter$.next(value);
+            this._$filter.next(value);
         }
     }
     get filter() {
-        return this._filter$.value;
+        return this._$filter.value;
     }
     set readonly(value) {
         this._readonly = value;
@@ -1093,6 +1088,9 @@ class MatAutocompleteField {
     get enabled() {
         return !this._readonly && this.formControl.enabled;
     }
+    get loading() {
+        return isNil(this.$filteredItems.value);
+    }
     ngOnInit() {
         var _a, _b;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
@@ -1109,10 +1107,11 @@ class MatAutocompleteField {
             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.mobile = toBoolean(this.mobile, this.config.mobile);
             this.suggestLengthThreshold = toNumber(this.suggestLengthThreshold, this.config.suggestLengthThreshold || 0);
             this.showAllOnFocus = toBoolean(this.showAllOnFocus, toBoolean(this.config.showAllOnFocus, this.suggestLengthThreshold <= 0));
-            this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus));
+            this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus, true));
             this.classList = this.classList || this.config.class;
             this.debounceTime = toNumber(this.debounceTime, this.config.debounceTime);
             this.highlightAccent = toBoolean(this.highlightAccent, toBoolean(this.config.highlightAccent));
@@ -1123,20 +1122,18 @@ class MatAutocompleteField {
         this.displayColumnSizes = this.displayColumnSizes
             // if only column: auto size
             || (this.displayAttributes.length === 1 && [undefined])
-            || this.displayAttributes.map(attr => 
-            // If label, set col size = 2
-            (attr && attr.endsWith('label')) ? 2 :
-                // If rankOrder => col size = 1
-                ((attr && attr.endsWith('rankOrder')) ? 1
-                    // Else => auto size
+            // 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')) ? 2
+                : ((attr && attr.endsWith('rankOrder')) ? 1
                     : undefined));
         this.displayColumnNames = this.displayAttributes.map((attr, index) => this.displayColumnNames && this.displayColumnNames[index] ||
             (this.i18nPrefix + changeCaseToUnderscore(attr).toUpperCase()));
         this.mobile = toBoolean(this.mobile, false);
         this.searchable = !this.mobile && !this.multiple;
-        // Default comparator (only need when using mat-select)
-        if (!this.searchable && !this.compareWith)
-            this.compareWith = (o1, o2) => o1 && o2 && o1.id === o2.id;
+        this.equals = this.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
         const classList = (_b = this.classList) === null || _b === void 0 ? void 0 : _b.split(' ');
         this.panelWidth = this.panelWidth || (classList && ((classList.includes('min-width-medium') && '300px')
             || (classList.includes('min-width-large') && '400px')
@@ -1151,7 +1148,7 @@ class MatAutocompleteField {
         if (!this.suggestFn) {
             const suggestFromArrayFn = (value, filter) => __awaiter(this, void 0, void 0, function* () {
                 // DEBUG
-                //console.debug(this.logPrefix + " Calling suggestFromArray with value=", value);
+                //console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
                 return suggestFromArray(this.$inputItems.value, value, Object.assign({ searchAttributes: this.displayAttributes }, filter));
             });
             // Wait (once) that items are loaded, then call suggest from array fn
@@ -1169,10 +1166,18 @@ class MatAutocompleteField {
         }
         else if (!this.searchable) {
             // Manually fill input items, from the given suggest function
-            this._subscription.add(this._filter$.pipe(startWith(this.filter), debounceTime(250), takeWhile((_) => !this.searchable), // Close subscription, when enabling search (no more mat-select)
+            this._subscription.add(this._$filter.pipe(startWith(this.filter), debounceTime(250), takeWhile((_) => !this.searchable), // Close subscription, when enabling search (no more mat-select)
             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) => (isNilOrBlank(value) || (value === '*')
+            ? (this.suggestLengthThreshold <= 0)
+            : (!(typeof value === 'string')
+                || value.length >= this.suggestLengthThreshold));
         const filteredItemsChanges = merge(
         // Reload event (no distinctUntilChanged() pipe, to force reload even if same value)
         this._reload$, 
@@ -1180,23 +1185,19 @@ class MatAutocompleteField {
         this.formControl.valueChanges
             .pipe(filter(value => this.enabled && this.searchable && isNotNilString(value)), 
         // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
-        tap(value => {
-            if (this.showLoadingSpinner) {
-                this.markAsLoading();
-            }
-        }), 
+        tap(_ => this.showLoadingSpinner && this.markAsLoading()), 
         // Filter if not enough character
         filter(value => value.length >= this.suggestLengthThreshold), 
         // Wait a debounce time
-        debounceTime(this.debounceTime)
+        debounceTime(this.debounceTime), 
         // DEBUG
-        //tap((value) => console.debug(this.logPrefix + ' Search text changes:', value)),
-        ), 
+        tap((value) => console.debug(this.logPrefix + ' Search text changes:', value))), 
         // Object set: use it (no distinctUntilChanged() pipe need)
         this.formControl.valueChanges
             .pipe(startWith(this.formControl.value), filter(value => (this.searchable && isNotNil(value) && typeof value === 'object')), tap(value => {
             // DEBUG
-            //console.debug(this.logPrefix + ' object changes:', value)
+            if (this.debug)
+                console.debug(this.logPrefix + ' object changes:', value);
             // Update the display value (if need)
             const displayValue = this.displayWith(value) || '';
             if (this.displayValue !== displayValue) {
@@ -1206,37 +1207,35 @@ class MatAutocompleteField {
                     this.matInputText.nativeElement.value = this.displayValue;
                 }
             }
-        })
+        }), 
         // DEBUG
-        //tap(value => console.debug(this.logPrefix + ' Received an object value: ', value))
-        ), 
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received an object value: ', value))), 
+        // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
+        this.dropButtonClick
+            .pipe(filter(event => this.searchable && this.enabled && (!event || !event.defaultPrevented)), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
+        // Make enough characters
+        filter(thresholdFilterFn)), 
         // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
         merge(
         // Focus or click => Load all
-        merge(this.onFocus, this.onClick)
-            .pipe(filter(_ => this.enabled && this.searchable), map(_ => this.showAllOnFocus ? '*' : this.formControl.value)), 
-        // On dropdown button click
-        this.onDropButtonClick
-            .pipe(filter(event => this.enabled && this.searchable && (!event || !event.defaultPrevented)), map(_ => this.showAllOnFocus ? '*' : this.formControl.value)), merge(this.$inputItems, this._filter$)
-            .pipe(filter(event => this.enabled && this.searchable), map(_ => this.formControl.value)))
+        merge(this.focused, this.clicked)
+            .pipe(filter(_ => this.enabled && this.searchable), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
+        // DEBUG
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event: ', value))), merge(this.$inputItems, this._$filter)
+            .pipe(filter(_ => this.searchable && this.enabled), map(_ => this.formControl.value), 
+        // DEBUG
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received $inputItems or filter event: ', value))))
             .pipe(
-        // Start to suggest when :
-        // - '*'
-        // - is nil, and there is 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
-        filter(value => value === '*'
-            || (isNil(value)
-                ? (this.suggestLengthThreshold <= 0)
-                : (!(typeof value === 'string')
-                    || value.length >= this.suggestLengthThreshold))), 
+        // Make sure there is enough characters
+        filter(thresholdFilterFn), 
         // Distinguish changes
-        distinctUntilChanged()))
+        // - do NOT filter if loading, to force update after a blur event
+        distinctUntilChanged((v1, v2) => !this.loading && (v1 === v2 || this.equals(v1, v2)))))
             .pipe(
         // Suggest values
         mergeMap(value => this.suggest(value, this.filter)), 
         // DEBUG
-        //tap(items => console.debug(this.logPrefix + ' Received from suggest: ', items)),
+        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.updateImplicitValue(items)));
         // Fetch more events
@@ -1257,7 +1256,7 @@ class MatAutocompleteField {
             // Make sure control value is inside (mat-select)
             if (items && !this.searchable) {
                 const value = this.formControl.value;
-                if (isNotNil(value) && typeof value === 'object' && items.findIndex(item => this.compareWith(item, value)) === -1) {
+                if (isNotNil(value) && typeof value === 'object' && items.findIndex(item => this.equals(item, value)) === -1) {
                     // If form value is missing: add it to the list
                     items = items.concat(value);
                 }
@@ -1266,10 +1265,12 @@ class MatAutocompleteField {
             this.$filteredItems.next(items);
         }));
         // Applying implicit value, on blur
-        this._subscription.add(this.onBlur
+        this._subscription.add(this.blurred
             .pipe(
         // Skip if not searchable
-        filter(_ => this.searchable), map(_ => this.formControl.value))
+        filter(_ => this.searchable), map(_ => this.formControl.value), 
+        // DEBUG
+        tap(value => console.debug(this.logPrefix + ' Received blurred event: ', value)))
             .subscribe(value => {
             // When leave component without object, use implicit value if :
             // - an explicit value
@@ -1280,12 +1281,14 @@ class MatAutocompleteField {
                 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.$filteredItems.next(undefined);
             }
             this._implicitValue = null; // reset the implicit value
         }));
@@ -1296,7 +1299,7 @@ class MatAutocompleteField {
         distinctUntilChanged())
             // Update component state
             .subscribe(() => this.checkIfTouched()));
-        this._subscription.add(this.onKeydownEscape.subscribe(event => {
+        this._subscription.add(this.keydownEscape.subscribe(event => {
             if (this.isOpen) {
                 event === null || event === void 0 ? void 0 : event.stopPropagation();
                 event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -1315,20 +1318,22 @@ class MatAutocompleteField {
             this._openedSubscription.unsubscribe();
         }
         this.$inputItems.complete();
+        this.$inputItems.unsubscribe();
         this.$filteredItems.complete();
+        this.$filteredItems.unsubscribe();
         this._reload$.complete();
-        this._filter$.complete();
-        this.onDropButtonClick.complete();
-        this.onClick.complete();
-        this.onBlur.complete();
-        this.onFocus.complete();
-        this.onKeydownEscape.complete();
-        this.onKeyupEnter.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.compareWith = null;
+        this.equals = null;
         this.suggestFn = null;
         this.$filteredItems = null;
         this.matSelectItems$ = null;
@@ -1338,8 +1343,8 @@ class MatAutocompleteField {
         this._onTouchedCallback = null;
         this._onFetchMoreCallback = null;
         // Destroy the 'autocomplete' instance, to avoid memory leak
-        if (this.matAutocomplete) {
-            this.matAutocomplete.ngOnDestroy();
+        if (this.autocomplete) {
+            this.autocomplete.ngOnDestroy();
         }
     }
     /**
@@ -1351,7 +1356,7 @@ class MatAutocompleteField {
     }
     writeValue(value) {
         // DEBUG
-        // console.debug(this.logPrefix + " Writing value: ", value);
+        // console.debug(this.logPrefix + ' Writing value: ', value);
         if (value !== this.formControl.value) {
             this.formControl.patchValue(value, { emitEvent: false });
             this._onChangeCallback(value);
@@ -1365,7 +1370,7 @@ class MatAutocompleteField {
     }
     setDisabledState(isDisabled) {
         var _a;
-        if (isDisabled && ((_a = this.matAutocomplete) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+        if (isDisabled && ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen)) {
             this.closePanel();
         }
         this.cd.markForCheck();
@@ -1379,7 +1384,7 @@ class MatAutocompleteField {
             (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
-    filterInputTextFocusInEvent(event) {
+    filterInputTextFocusEvent(event) {
         if (!event || event.defaultPrevented)
             return;
         // Ignore event from mat-option
@@ -1388,15 +1393,20 @@ class MatAutocompleteField {
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
-            //DEBUG console.debug(this.logPrefix + " Cancelling focus event");
+            // DEBUG
+            if (this.debug)
+                console.debug(this.logPrefix + ' Cancelling focus event');
             return false;
         }
-        const hasContent = selectInputContent(event);
+        if (this.debug)
+            console.debug(this.logPrefix + ' Select input content');
+        const hasContent = true; // selectInputContent(event);
         // If combo is empty, or if has content but should force to show panel on focus
-        if (!hasContent || (this.showPanelOnFocus && this.showAllOnFocus)) {
+        if (!hasContent || this.showPanelOnFocus || this.showAllOnFocus) {
             // DEBUG
-            //console.debug(this.logPrefix + ' Emit focus event');
-            this.onFocus.emit(event);
+            if (this.debug)
+                console.debug(this.logPrefix + ' Emit focus event');
+            this.focused.emit();
             return true;
         }
         return false;
@@ -1410,14 +1420,17 @@ class MatAutocompleteField {
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
-            //DEBUG console.debug(this.logPrefix + " Cancelling blur event");
+            // DEBUG
+            if (this.debug)
+                console.debug(this.logPrefix + " Cancelling blur event");
             return false;
         }
         //DEBUG
-        //console.debug(this.logPrefix + ' Blur: move caret to the beginning');
+        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, 0, 0);
-        this.onBlur.emit(event);
+        this.blurred.emit(event);
         return true;
     }
     filterMatSelectFocusEvent(event) {
@@ -1425,7 +1438,7 @@ class MatAutocompleteField {
             return;
         // DEBUG
         // console.debug(this.logPrefix + " Received <mat-select> focus event", event);
-        this.onFocus.emit(event);
+        this.focused.emit(event);
     }
     filterMatSelectBlurEvent(event) {
         if (!event || event.defaultPrevented)
@@ -1442,7 +1455,7 @@ class MatAutocompleteField {
             // console.debug(this.logPrefix + " Cancelling <mat-select> blur event");
             return false;
         }
-        this.onBlur.emit(event);
+        this.blurred.emit(event);
         return true;
     }
     toggleSearch(event) {
@@ -1464,7 +1477,7 @@ class MatAutocompleteField {
         event.stopPropagation();
     }
     _initAutocompleteInfiniteScroll(threshold) {
-        if (!this.matAutocomplete)
+        if (!this.autocomplete)
             return; // Skip
         // DEBUG
         //console.debug(this.logPrefix + ' Init autocomplete scroll listener');
@@ -1472,12 +1485,12 @@ class MatAutocompleteField {
             this._openedSubscription.unsubscribe();
             this._subscription.remove(this._openedSubscription);
         }
-        const opened$ = this.matAutocomplete._isOpen
+        const opened$ = this.autocomplete._isOpen
             ? timer(0)
-            : this.matAutocomplete.opened.pipe(debounceTime(200));
+            : this.autocomplete.opened.pipe(debounceTime(200));
         const scrollEnd$ = opened$
             .pipe(map((_) => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)
-            .pipe(takeUntil(this.matAutocomplete.closed))));
+            .pipe(takeUntil(this.autocomplete.closed))));
         // Trigger fetch more, end end scroll reached
         this._openedSubscription = scrollEnd$
             .subscribe(() => this._fetchMore$.emit());
@@ -1508,14 +1521,14 @@ class MatAutocompleteField {
     }
     get isOpen() {
         var _a, _b;
-        return (this.searchable && ((_a = this.matAutocomplete) === null || _a === void 0 ? void 0 : _a.isOpen))
+        return (this.searchable && ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen))
             || ((_b = this.matSelect) === null || _b === void 0 ? void 0 : _b.panelOpen)
             || false;
     }
     closePanel() {
         var _a, _b, _c, _d;
-        if ((_a = this.matAutocomplete) === null || _a === void 0 ? void 0 : _a.isOpen) {
-            (_b = this.matAutocompleteTrigger) === null || _b === void 0 ? void 0 : _b.closePanel();
+        if ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen) {
+            (_b = this.autocompleteTrigger) === null || _b === void 0 ? void 0 : _b.closePanel();
             return;
         }
         if ((_c = this.matSelect) === null || _c === void 0 ? void 0 : _c.panelOpen) {
@@ -1525,6 +1538,7 @@ class MatAutocompleteField {
     /* -- private method -- */
     suggest(value, filter) {
         return __awaiter(this, void 0, void 0, function* () {
+            // Call suggestion function
             let res = yield this.suggestFn(value, filter);
             // DEBUG
             //console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
@@ -1545,6 +1559,9 @@ class MatAutocompleteField {
                 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;
         });
     }
@@ -1582,7 +1599,7 @@ class MatAutocompleteField {
     }
     getAutocompletePanel() {
         var _a, _b;
-        const ele = (_b = (_a = this.matAutocomplete) === null || _a === void 0 ? void 0 : _a.options.last) === null || _b === void 0 ? void 0 : _b._getHostElement().parentElement;
+        const ele = (_b = (_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.options.last) === null || _b === void 0 ? void 0 : _b._getHostElement().parentElement;
         if (!ele) {
             // DEBUG
             console.warn(this.logPrefix + ' Unable to find the autocomplete div...');
@@ -1616,10 +1633,14 @@ MatAutocompleteField.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'mat-autocomplete-field',
-                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <!-- readonly -->\n        <ng-container>\n          <input matInput hidden type=\"text\"\n                 [placeholder]=\"placeholder\"\n                 [formControl]=\"formControl\" readonly>\n          <ion-text>{{displayWith(value)}}</ion-text>\n        </ng-container>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                      [compareWith]=\"compareWith\"\n                      [multiple]=\"multiple\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- header -->\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as isLast\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>{{noResultMessage | translate}}</ion-label>\n              </mat-option>\n\n              <!-- options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text>{{item | propertyGet: path }}</ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #searchableTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"onClick.emit($event)\"\n                   (focus)=\"filterInputTextFocusInEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                   (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.opened && onDropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [class.cdk-visually-hidden]=\"!searchable\"\n                              [panelWidth]=\"panelWidth\">\n\n              <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  <ion-text color=\"light\" *ngIf=\"last && itemCount; let count \" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n              <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>{{noResultMessage | translate}}</ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"searchable\"\n          (click)=\"onDropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n          *ngIf=\"enabled && mobile && !searchable && !multiple\"\n          [title]=\"'COMMON.BTN_SEARCH'|translate\"\n          (click)=\"toggleSearch($event)\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
-                providers: [DEFAULT_VALUE_ACCESSOR$6],
+                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\"\n               [placeholder]=\"placeholder\"\n               [formControl]=\"formControl\" readonly>\n        <ion-text>{{displayWith(value)}}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"keydownEscape.emit($event)\"\n                      (keyup.enter)=\"keyupEnter.emit($event)\"\n                      [compareWith]=\"equals\"\n                      [multiple]=\"multiple\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- header -->\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as isLast\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>{{noResultMessage | translate}}</ion-label>\n              </mat-option>\n\n              <!-- options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text>{{item | propertyGet: path }}</ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #searchableTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"clicked.emit($event)\"\n                   (focus)=\"filterInputTextFocusEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"keydownEscape.emit($event)\"\n                   (keyup.enter)=\"keyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"dropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [panelWidth]=\"panelWidth\">\n\n              <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  <ion-text color=\"light\" *ngIf=\"last && itemCount; let count\" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n              <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"searchable\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n          *ngIf=\"enabled && mobile && !searchable && !multiple\"\n          [title]=\"'COMMON.BTN_SEARCH'|translate\"\n          (click)=\"toggleSearch($event)\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                providers: [{
+                        provide: NG_VALUE_ACCESSOR,
+                        multi: true,
+                        useExisting: forwardRef(() => MatAutocompleteField)
+                    }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.fact-scroll-viewport{height:100%;width:100%}.fact-item{height:54px;display:flex}.fact-item .fact-date{min-width:100px;text-align:center;font-size:24pt}.fact-item .fact-date,.fact-item .fact-text{height:100%;align-items:center;justify-content:center;display:flex}.fact-item .fact-text{border-radius:10px}cdk-virtual-scroll-viewport{border:1px solid #000}cdk-virtual-scroll-viewport li{list-style:none}"]
+                styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}"]
             },] }
 ];
 MatAutocompleteField.ctorParameters = () => [
@@ -1627,7 +1648,7 @@ MatAutocompleteField.ctorParameters = () => [
     { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 MatAutocompleteField.propDecorators = {
-    compareWith: [{ type: Input }],
+    equals: [{ type: Input }],
     logPrefix: [{ type: Input }],
     formControl: [{ type: Input }],
     formControlName: [{ type: Input }],
@@ -1657,21 +1678,21 @@ MatAutocompleteField.propDecorators = {
     fetchMoreThreshold: [{ type: Input }],
     suggestLengthThreshold: [{ type: Input }],
     showLoadingSpinner: [{ type: Input }],
-    animationsDisabled: [{ type: HostBinding, args: ['@.disabled',] }],
+    debug: [{ type: Input }],
+    clicked: [{ type: Output, args: ['click',] }],
+    blurred: [{ type: Output, args: ['blur',] }],
+    focused: [{ type: Output, args: ['focus',] }],
+    dropButtonClick: [{ type: Output }],
+    keydownEscape: [{ type: Output, args: ['keydown.escape',] }],
+    keyupEnter: [{ type: Output, args: ['keyup.enter',] }],
+    matSelect: [{ type: ViewChild, args: ['matSelect',] }],
+    matInputText: [{ type: ViewChild, args: ['matInputText',] }],
+    autocomplete: [{ type: ViewChild, args: [MatAutocomplete,] }],
+    autocompleteTrigger: [{ type: ViewChild, args: [MatAutocompleteTrigger,] }],
     filter: [{ type: Input }],
     readonly: [{ type: Input }],
     tabindex: [{ type: Input }],
-    items: [{ type: Input }],
-    onClick: [{ type: Output, args: ['click',] }],
-    onBlur: [{ type: Output, args: ['blur',] }],
-    onFocus: [{ type: Output, args: ['focus',] }],
-    onDropButtonClick: [{ type: Output, args: ['dropButtonClick',] }],
-    onKeydownEscape: [{ type: Output, args: ['keydown.escape',] }],
-    onKeyupEnter: [{ type: Output, args: ['keyup.enter',] }],
-    matSelect: [{ type: ViewChild, args: ['matSelect',] }],
-    matInputText: [{ type: ViewChild, args: ['matInputText',] }],
-    matAutocomplete: [{ type: ViewChild, args: [MatAutocomplete,] }],
-    matAutocompleteTrigger: [{ type: ViewChild, args: [MatAutocompleteTrigger,] }]
+    items: [{ type: Input }]
 };
 
 class DateFormatPipe {
@@ -4085,9 +4106,9 @@ const MASKS = {
         DD: [/[+-]/, /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, '°']
     }
 };
-const noop$6 = () => {
+const noop$7 = () => {
 };
-const ɵ0$9 = noop$6;
+const ɵ0$a = noop$7;
 class MatLatLongField {
     constructor(platform, translate, formBuilder, cd, formGroupDir) {
         this.platform = platform;
@@ -4095,8 +4116,8 @@ class MatLatLongField {
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$6;
-        this._onTouchedCallback = noop$6;
+        this._onChangeCallback = noop$7;
+        this._onTouchedCallback = noop$7;
         this._subscription = new Subscription();
         this.disabling = false;
         this.writing = false;
@@ -4438,8 +4459,8 @@ const DEFAULT_VALUE_ACCESSOR$5 = {
     multi: true
 };
 const DAY_MASK$2 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
-const noop$5 = () => { };
-const ɵ0$8 = noop$5;
+const noop$6 = () => { };
+const ɵ0$9 = noop$6;
 class MatDate {
     constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
         this.dateAdapter = dateAdapter;
@@ -4448,8 +4469,8 @@ class MatDate {
         this.cd = cd;
         this.keyboard = keyboard;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$5;
-        this._onTouchedCallback = noop$5;
+        this._onChangeCallback = noop$6;
+        this._onTouchedCallback = noop$6;
         this._subscription = new Subscription();
         this.writing = true;
         this.disabling = false;
@@ -4731,9 +4752,9 @@ const DEFAULT_VALUE_ACCESSOR$4 = {
 const DAY_MASK$1 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
 const HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
 const HOUR_MASK$1 = [/[012]/, /\d/, ':', /[012345]/, /\d/];
-const noop$4 = () => {
+const noop$5 = () => {
 };
-const ɵ0$7 = noop$4;
+const ɵ0$8 = noop$5;
 class MatDateTime {
     constructor(platform, dateAdapter, translate, formBuilder, keyboard, cd, formGroupDir) {
         this.platform = platform;
@@ -4743,8 +4764,8 @@ class MatDateTime {
         this.keyboard = keyboard;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$4;
-        this._onTouchedCallback = noop$4;
+        this._onChangeCallback = noop$5;
+        this._onTouchedCallback = noop$5;
         this._subscription = new Subscription();
         this.writing = true;
         this.disabling = false;
@@ -5102,9 +5123,9 @@ const DEFAULT_VALUE_ACCESSOR$3 = {
     multi: true
 };
 const DAY_MASK = [/\d/, /\d/, /\d/, /\d/];
-const noop$3 = () => {
+const noop$4 = () => {
 };
-const ɵ0$6 = noop$3;
+const ɵ0$7 = noop$4;
 class MatDateShort {
     constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
         this.dateAdapter = dateAdapter;
@@ -5113,8 +5134,8 @@ class MatDateShort {
         this.cd = cd;
         this.keyboard = keyboard;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$3;
-        this._onTouchedCallback = noop$3;
+        this._onChangeCallback = noop$4;
+        this._onTouchedCallback = noop$4;
         this.writing = true;
         this.disabling = false;
         this.dayMask = DAY_MASK;
@@ -5437,9 +5458,9 @@ const DEFAULT_VALUE_ACCESSOR$2 = {
 };
 const HOUR_TIME_PATTERN = /[0-9]\d\d:[0-5]\d/;
 const HOUR_MASK = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
-const noop$2 = () => {
+const noop$3 = () => {
 };
-const ɵ0$5 = noop$2;
+const ɵ0$6 = noop$3;
 class MatDuration {
     constructor(platform, dateAdapter, translate, formBuilder, cd, formGroupDir) {
         this.dateAdapter = dateAdapter;
@@ -5448,8 +5469,8 @@ class MatDuration {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
         this._subscription = new Subscription();
-        this._onChangeCallback = noop$2;
-        this._onTouchedCallback = noop$2;
+        this._onChangeCallback = noop$3;
+        this._onTouchedCallback = noop$3;
         this.writing = true;
         this.disabling = false;
         this.hourMask = HOUR_MASK;
@@ -5694,17 +5715,17 @@ const DEFAULT_VALUE_ACCESSOR$1 = {
     useExisting: forwardRef(() => MatBooleanField),
     multi: true
 };
-const noop$1 = () => {
+const noop$2 = () => {
 };
-const ɵ0$4 = noop$1;
+const ɵ0$5 = noop$2;
 class MatBooleanField {
     constructor(translate, formBuilder, cd, formGroupDir) {
         this.translate = translate;
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$1;
-        this._onTouchedCallback = noop$1;
+        this._onChangeCallback = noop$2;
+        this._onTouchedCallback = noop$2;
         this._writing = false;
         this.showRadio = false;
         this.disabled = false;
@@ -6487,8 +6508,8 @@ class MatSwipeField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$8;
-        this._onTouchedCallback = noop$8;
+        this._onChangeCallback = noop$9;
+        this._onTouchedCallback = noop$9;
         this._subscription = new Subscription();
         this._writing = false;
         this.showSlides = false;
@@ -6552,7 +6573,7 @@ class MatSwipeField {
         // Default values
         this.displayAttributes = this.displayAttributes || ['label', 'name'];
         this.displayWith = this.displayWith || ((obj) => obj && joinPropertiesPath(obj, this.displayAttributes));
-        this.compareWithFn = this.compareWithFn || ((o1, o2) => o1 && o2 && o1.id === o2.id);
+        this.equals = this.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
         this.mobile = toBoolean(this.mobile, false);
     }
     ngOnDestroy() {
@@ -6612,7 +6633,7 @@ class MatSwipeField {
         if (this._writing)
             return;
         this._writing = true;
-        if (!this.compareWithFn(value, this._value)) {
+        if (!this.equals(value, this._value)) {
             this._value = value;
             this.showSlides = isNotNil(this._value);
             this.updateSlides();
@@ -6696,7 +6717,7 @@ class MatSwipeField {
     }
     updateSlides() {
         if (this.showSlides) {
-            const itemIndex = (this.$items.getValue() || []).findIndex(value => this.compareWithFn(value, this._value));
+            const itemIndex = (this.$items.getValue() || []).findIndex(value => this.equals(value, this._value));
             if (itemIndex >= 0) {
                 this.slideTo(itemIndex);
             }
@@ -6760,7 +6781,7 @@ MatSwipeField.propDecorators = {
     required: [{ type: Input }],
     mobile: [{ type: Input }],
     clearable: [{ type: Input }],
-    compareWithFn: [{ type: Input }],
+    equals: [{ type: Input }],
     displayWith: [{ type: Input }],
     displayAttributes: [{ type: Input }],
     appAutofocus: [{ type: Input }],
@@ -6799,43 +6820,57 @@ SharedMatSwipeModule.decorators = [
             },] }
 ];
 
+const noop$1 = () => { };
+const ɵ0$4 = noop$1;
 class MatChipsField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = (_) => { };
-        this._onTouchedCallback = () => { };
+        this._onChangeCallback = noop$1;
+        this._onTouchedCallback = noop$1;
         this.logPrefix = '[mat-chips] ';
+        this.formControlName = null;
         this.required = false;
         this.readonly = false;
         this.clearable = false;
-        this.debounceTime = 250;
-        this.highlightAccent = false;
+        this.debounceTime = null;
         this.i18nPrefix = 'REFERENTIAL.';
         this.noResultMessage = 'COMMON.NO_RESULT';
+        this.itemSize = '48px';
+        this.fetchMoreThreshold = '15%';
+        this.suggestLengthThreshold = null;
+        this.showLoadingSpinner = true;
+        this.chipColor = null;
         this.debug = false;
         this.clicked = new EventEmitter();
         this.blurred = new EventEmitter();
         this.focused = new EventEmitter();
+        this.dropButtonClick = new EventEmitter(true);
+        this.keydownEscape = new EventEmitter();
+        this.keyupEnter = new EventEmitter();
         this.$inputItems = new BehaviorSubject(undefined);
-        this.onDropButtonClick = new EventEmitter(true);
+        this.$filteredItems = new BehaviorSubject(undefined);
         this.inputControl = new FormControl();
-        this.getPropertyByPath = getPropertyByPath;
+        this._fetchMore$ = new EventEmitter();
         this._subscription = new Subscription();
         this._$filter = new BehaviorSubject(undefined);
+        this._reload$ = new Subject();
     }
     get itemCount() {
         return this._itemCount;
     }
+    get canFetchMore() {
+        return this._onFetchMoreCallback && this._moreItemsCount > 0;
+    }
     set filter(value) {
-        if (this.debug)
-            console.debug(this.logPrefix + ' Setting filter:', value);
-        if (value !== this._$filter.getValue()) {
+        if (value !== this._$filter.value) {
+            // DEBUG
+            //console.debug(this.logPrefix + " Setting filter:", value);
             this._$filter.next(value);
         }
     }
     get filter() {
-        return this._$filter.getValue();
+        return this._$filter.value;
     }
     set tabindex(value) {
         this._tabindex = value;
@@ -6847,19 +6882,25 @@ class MatChipsField {
     set items(value) {
         // Remove previous subscription on items, (if exits)
         if (this._itemsSubscription) {
-            console.warn('Items received twice !');
+            console.warn(this.logPrefix + ' Items received twice !');
             this._subscription.remove(this._itemsSubscription);
             this._itemsSubscription.unsubscribe();
         }
         if (isObservable(value)) {
-            this._itemsSubscription = this._subscription.add(value.subscribe(v => this.$inputItems.next(v)));
+            this._itemsSubscription = this._subscription.add(value.subscribe(v => {
+                //console.warn(this.logPrefix + " Received items: ", v);
+                this.$inputItems.next(v);
+            }));
         }
         else {
-            if (value !== this.$inputItems.getValue()) {
+            if (value !== this.$inputItems.value) {
                 this.$inputItems.next(value);
             }
         }
     }
+    get items() {
+        return this.$inputItems;
+    }
     get value() {
         return this.formControl.value || [];
     }
@@ -6869,7 +6910,11 @@ class MatChipsField {
     get enabled() {
         return !this.readonly && this.formControl.enabled;
     }
+    get loading() {
+        return isNil(this.$filteredItems.value);
+    }
     ngOnInit() {
+        var _a, _b;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
         if (!this.formControl)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-chips-field>.');
@@ -6884,85 +6929,204 @@ class MatChipsField {
             this.displayColumnSizes = this.displayColumnSizes || this.config.columnSizes;
             this.displayColumnNames = this.displayColumnNames || this.config.columnNames;
             this.displayWith = this.displayWith || this.config.displayWith;
-            this.compareWith = this.compareWith || this.config.compareWith;
+            this.equals = this.equals || this.config.equals;
             this.mobile = toBoolean(this.mobile, this.config.mobile);
-            this.showAllOnFocus = toBoolean(this.showAllOnFocus, toBoolean(this.config.showAllOnFocus, true));
+            this.suggestLengthThreshold = toNumber(this.suggestLengthThreshold, this.config.suggestLengthThreshold || 0);
+            this.showAllOnFocus = toBoolean(this.showAllOnFocus, toBoolean(this.config.showAllOnFocus, this.suggestLengthThreshold <= 0));
             this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus, true));
-            this.class = this.class || this.config.class;
+            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.displayAttributes = this.displayAttributes || (this.filter && this.filter.attributes) || ['label', 'name'];
+        this.displayAttributes = this.displayAttributes || ((_a = this.filter) === null || _a === void 0 ? void 0 : _a.attributes) || ['label', 'name'];
         this.displayWith = this.displayWith || ((obj) => obj && joinPropertiesPath(obj, this.displayAttributes));
-        this.compareWith = this.compareWith || ((o1, o2) => o1 && o2 && o1.id === o2.id);
-        this.displayColumnSizes = this.displayColumnSizes || this.displayAttributes.map(attr => (
-        // If label then col size = 2
-        attr && attr.endsWith('label')) ? 2 :
-            // If rankOrder then col size = 1
-            (attr && attr.endsWith('rankOrder') ? 1 :
-                // Else, auto size
-                undefined));
+        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')) ? 2
+                : ((attr && attr.endsWith('rankOrder')) ? 1
+                    : undefined));
         this.displayColumnNames = this.displayAttributes.map((attr, index) => this.displayColumnNames && this.displayColumnNames[index] ||
             (this.i18nPrefix + changeCaseToUnderscore(attr).toUpperCase()));
         this.mobile = toBoolean(this.mobile, false);
+        this.equals = this.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
+        const classList = (_b = this.classList) === null || _b === void 0 ? void 0 : _b.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('mat-autocomplete-panel-full-size') && '100vw')));
+        this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, true);
+        this.debounceTime = toNumber(this.debounceTime, 250);
+        this.highlightAccent = toBoolean(this.highlightAccent, false);
+        this.suggestLengthThreshold = this.suggestLengthThreshold || 0;
+        this.matAutocompletePosition = this.matAutocompletePosition || (this.mobile ? 'above' : 'auto'); // On mobile, set position to above (because of bottom keyboard)
         // No suggestFn: filter on the given items
         if (!this.suggestFn) {
             const suggestFromArrayFn = (value, filter) => __awaiter(this, void 0, void 0, function* () {
                 if (this.debug)
                     console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
-                const { data, total } = yield suggestFromArray(this.$inputItems.getValue(), value, Object.assign({ searchAttributes: this.displayAttributes }, filter));
-                this._itemCount = toNumber(total, data && data.length || 0);
-                return { data, total };
+                return suggestFromArray(this.$inputItems.value, value, Object.assign({ searchAttributes: this.displayAttributes }, filter));
             });
             // Wait (once) that items are loaded, then call suggest from array fn
             this.suggestFn = (value, filter) => __awaiter(this, void 0, void 0, function* () {
-                if (isNil(this.$inputItems.getValue())) {
+                if (isNil(this.$inputItems.value)) {
                     if (this.debug)
                         console.debug('[mat-chips] Waiting items to be set...');
                     yield firstNotNilPromise(this.$inputItems);
                     if (this.debug)
-                        console.debug('[mat-chips] Received items:', this.$inputItems.getValue());
+                        console.debug('[mat-chips] Received items:', this.$inputItems.value);
                 }
                 this.suggestFn = suggestFromArrayFn;
-                return this.suggest(value, filter); // Loop
+                return this.suggestFn(value, filter); // Loop
             });
         }
-        // this.matSelectItems$ = this.$inputItems
-        //   .pipe(
-        //     filter(isNotNil),
-        //     map((items) => {
-        //       // Make sure control value is inside
-        //       const value = this.inputControl.value;
-        //       // If form value is missing: add it to the list
-        //       if (isNotNil(value) && typeof value === 'object' && items.findIndex(item => this.compareWith(item, value)) === -1) {
-        //         // console.debug(this.logPrefix + " Add form value to items, because missed in items", value);
-        //         return items.concat(value);
-        //       }
-        //       return items;
-        //     })
-        //   );
-        this._subscription.add(this.onDropButtonClick
-            .pipe(filter(event => (!event || !event.defaultPrevented) && this.formControl.enabled))
-            .subscribe(() => {
-            this.matInputText.nativeElement.focus();
-        }));
-        const updateFilteredItemsEvents$ = merge(
+        // 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) => (isNilOrBlank(value) || (value === '*')
+            ? (this.suggestLengthThreshold <= 0)
+            : (!(typeof value === 'string')
+                || value.length >= this.suggestLengthThreshold));
+        const filteredItemsChanges = merge(
+        // Reload event (no distinctUntilChanged() pipe, to force reload even if same value)
+        this._reload$, this.inputControl.valueChanges
+            .pipe(filter(value => this.enabled && isNotNilString(value)), 
+        // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
+        tap(_ => this.showLoadingSpinner && this.markAsLoading()), 
+        // Filter if not enough character
+        filter(value => value.length >= this.suggestLengthThreshold), 
+        // Wait a debounce time
+        debounceTime(this.debounceTime)
+        // DEBUG
+        //tap((value) => console.debug(this.logPrefix + ' Search text changes:', value))
+        ), 
+        // Object set: use it (no distinctUntilChanged() pipe need)
+        this.inputControl.valueChanges
+            .pipe(startWith(this.inputControl.value), filter(value => isNotNil(value) && typeof value === 'object'), 
+        // DEBUG
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received an object value: ', value))), 
+        // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
+        this.dropButtonClick
+            .pipe(filter(event => this.enabled && (!event || !event.defaultPrevented)), tap(_ => this.matInputText.nativeElement.focus()), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
+        // Make sure there is enough characters
+        filter(thresholdFilterFn)), 
+        // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
+        merge(
         // Focus or click => Load all
         merge(this.focused, this.clicked)
-            .pipe(filter(_ => this.enabled), map((_) => this.showAllOnFocus ? '*' : this.inputControl.value)), this.inputControl.valueChanges
-            .pipe(startWith(this.inputControl.value), filter(value => (isNotNil(value) && typeof value === 'object') || (isNotNilString(value) && !value.includes('**'))), tap((value) => {
-            if (this.debug)
-                console.debug(this.logPrefix + ' valueChanges:', value);
-        }), debounceTime(this.debounceTime)), this.$inputItems
-            .pipe(map(() => this.formControl.value)), this._$filter
-            .pipe(map(() => this.formControl.value)));
-        this.filteredItems$ = updateFilteredItemsEvents$
-            .pipe(distinctUntilChanged(), 
-        //tap(value => this.debug && console.debug(this.logPrefix + " Received update event: ", value)),
-        switchMap((value) => this.suggest(value, this.filter)));
+            .pipe(filter(_ => this.enabled), map((_) => this.showAllOnFocus ? '*' : this.inputControl.value)), merge(this.$inputItems, this._$filter)
+            .pipe(filter(_ => this.enabled), map(_ => this.inputControl.value)))
+            .pipe(
+        // Make sure there is enough characters
+        filter(thresholdFilterFn), 
+        // Distinguish changes
+        distinctUntilChanged()))
+            .pipe(
+        // Suggest values
+        mergeMap(value => this.suggest(value, this.filter)), 
+        // DEBUG
+        //tap(items => console.debug(this.logPrefix + ' Received from suggest: ', items)),
+        // Store implicit value (will use it onBlur if not other value selected)
+        tap(items => this.updateImplicitValue(items)));
+        // Fetch more events
+        const fetchMoreItemsChanges = this._fetchMore$
+            .pipe(tap(event => event === null || event === void 0 ? void 0 : 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)
+            // Emit items
+            .subscribe(items => this.$filteredItems.next(items)));
+        // Applying implicit value, on blur
+        this._subscription.add(this.blurred
+            .pipe(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.$filteredItems.next(undefined);
+            }
+            this._implicitValue = null; // reset the implicit value
+        }));
+        // Listen form control status change
+        this._subscription.add(this.formControl.statusChanges
+            .pipe(
+        //filter(() => this.enabled),
+        distinctUntilChanged())
+            // Update component state
+            .subscribe(() => this.checkIfTouched()));
+        this._subscription.add(this.keydownEscape.subscribe(event => {
+            if (this.isOpen) {
+                event === null || event === void 0 ? void 0 : event.stopPropagation();
+                event === null || event === void 0 ? void 0 : event.preventDefault();
+                // DEBUG
+                //console.debug(this.logPrefix + " Closing the panel (keydown.escape)");
+                this.closePanel();
+            }
+        }));
     }
     ngOnDestroy() {
         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();
+        }
     }
     /**
      * Add item to chips
@@ -6983,27 +7147,35 @@ class MatChipsField {
      * @param item
      */
     remove(item) {
-        const index = this.value && this.value.indexOf(item);
-        if (index >= 0) {
-            const value = this.value.slice();
-            value.splice(index, 1);
-            this.writeValue(value);
-            this.inputControl.setValue('');
+        const value = this.value;
+        const index = value ? value.indexOf(item) : -1;
+        if (index !== -1) {
+            const newValue = value.slice();
+            newValue.splice(index, 1);
+            this.writeValue(newValue);
+            this.closePanel();
         }
     }
     /**
      * Allow to reload content. Useful when filter has been changed but not detected
      */
-    reloadItems() {
-        this.onDropButtonClick.emit();
+    reloadItems(value) {
+        // Force a refresh
+        this._reload$.next(value || '*');
     }
     writeValue(value) {
-        if (this.debug)
-            console.debug(this.logPrefix + ' Writing value: ', value);
+        if (value && !Array.isArray(value)) {
+            value = [value];
+        }
         if (value !== this.formControl.value) {
+            if (this.debug)
+                console.debug(this.logPrefix + ' Writing value: ', value);
             this.formControl.patchValue(value, { emitEvent: false });
             this._onChangeCallback(value);
         }
+        else {
+            this.markForCheck();
+        }
     }
     registerOnChange(fn) {
         this._onChangeCallback = fn;
@@ -7012,6 +7184,10 @@ class MatChipsField {
         this._onTouchedCallback = fn;
     }
     setDisabledState(isDisabled) {
+        var _a;
+        if (isDisabled && ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+            this.closePanel();
+        }
         this.cd.markForCheck();
     }
     focus() {
@@ -7031,6 +7207,7 @@ class MatChipsField {
             return false;
         }
         const hasContent = selectInputContent(event);
+        // If combo is empty, or if has content but should force to show panel on focus
         if (!hasContent || (this.showPanelOnFocus && this.showAllOnFocus)) {
             if (this.debug)
                 console.debug(this.logPrefix + ' Emit focus event');
@@ -7039,17 +7216,75 @@ class MatChipsField {
         }
         return false;
     }
+    filterInputTextBlurEvent(event) {
+        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 console.debug(this.logPrefix + " Cancelling blur event");
+            return false;
+        }
+        //DEBUG
+        //console.debug(this.logPrefix + ' Blur: move caret to the beginning');
+        // Move caret to the beginning (fix issue IMAGINE-469)
+        selectInputRange(event.target, 0, 0);
+        this.blurred.emit(event);
+        return true;
+    }
+    filterChipsFocusEvent(event) {
+        // DEBUG
+        if (this.debug)
+            console.debug(this.logPrefix + ' Focus in chips list', event);
+        // Ignore event in button
+        this.matInputText.nativeElement.focus();
+    }
     clearValue(event) {
         this.writeValue(null);
         event.stopPropagation();
     }
+    _initAutocompleteInfiniteScroll(threshold) {
+        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$ = 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)
+            .pipe(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);
+    }
+    get isOpen() {
+        var _a;
+        return ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen) || false;
+    }
+    closePanel() {
+        var _a, _b;
+        if ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen) {
+            (_b = this.autocompleteTrigger) === null || _b === void 0 ? void 0 : _b.closePanel();
+            return;
+        }
+    }
     /* -- private method -- */
     suggest(value, filter) {
         return __awaiter(this, void 0, void 0, function* () {
             // Call suggestion function
             let res = yield this.suggestFn(value, filter);
             // DEBUG
-            // console.debug(this.logPrefix + " Filtered items by suggestFn:", value, res);
+            //console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
             if (!res) {
                 this._itemCount = 0;
                 res = [];
@@ -7059,37 +7294,88 @@ class MatChipsField {
                 this._itemCount = res.length || 0;
             }
             else {
-                const { data, total } = res;
-                res = data;
+                const { data, total, fetchMore } = res;
                 this._itemCount = toNumber(total, data && data.length || 0);
+                this._onFetchMoreCallback = fetchMore;
+                this._moreItemsCount = fetchMore && (this._itemCount - data.length) || 0;
+                res = data;
             }
             // Filter out existing items
-            const filteredData = (res || []).slice().filter(item1 => this.value.findIndex(item2 => this.compareWith(item1, item2)) === -1);
-            // Update items count
-            this._itemCount = this._itemCount - (((res === null || res === void 0 ? void 0 : res.length) || 0) - ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) || 0));
+            const filteredData = (res || []).slice().filter(item1 => this.value.findIndex(item2 => this.equals(item1, item2)) === -1);
+            const removedItemCount = (((res === null || res === void 0 ? void 0 : res.length) || 0) - ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) || 0));
+            // Decrease the item count, with delta
+            this._itemCount -= removedItemCount;
             if (this.debug)
                 console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
             return res;
         });
     }
+    fetchMore() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._onFetchMoreCallback)
+                return [];
+            // Save then remove fetch function (to avoid multi-call)
+            const fetchMoreFn = this._onFetchMoreCallback;
+            this._onFetchMoreCallback = undefined;
+            const { data, total, fetchMore } = yield fetchMoreFn();
+            this._itemCount = total || this._itemCount;
+            this._onFetchMoreCallback = fetchMore;
+            this._moreItemsCount = Math.max(0, this._moreItemsCount - data.length); // Borne min = 0
+            return data;
+        });
+    }
+    updateImplicitValue(items) {
+        // 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;
+        }
+    }
+    checkIfTouched() {
+        if (this.formControl.touched) {
+            this.cd.markForCheck();
+            this._onTouchedCallback();
+        }
+    }
+    getAutocompletePanel() {
+        var _a, _b;
+        const ele = (_b = (_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.options.last) === null || _b === void 0 ? void 0 : _b._getHostElement().parentElement;
+        if (!ele) {
+            // DEBUG
+            console.warn(this.logPrefix + ' Unable to find the autocomplete div...');
+        }
+        return ele;
+    }
     markForCheck() {
         this.cd.markForCheck();
     }
+    markAsLoading() {
+        if (this.$filteredItems.value) {
+            this.$filteredItems.next(undefined);
+            this._itemCount = undefined;
+            this._implicitValue = undefined;
+            this._onFetchMoreCallback = undefined;
+            this._moreItemsCount = 0;
+            this.markForCheck();
+        }
+    }
 }
 MatChipsField.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'mat-chips-field',
-                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\" class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-content select=\"[matPrefix]\"></ng-content>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList>\n          <mat-chip\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\">\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input matInput #matInputText type=\"text\"\n                 [matAutocomplete]=\"autoCombo\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"appAutofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (blur)=\"blurred.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (keyup.arrowdown)=\"!autoCombo.showPanel && onDropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n                 >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autoCombo=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"class\">\n          <ng-container *ngIf=\"(filteredItems$ | async) as items\">\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as isLast\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                <ion-text color=\"light\" *ngIf=\"isLast\" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: itemCount} }}</i></ion-text>\n              </ion-col>\n            </ion-row>\n\n            <!-- No item option -->\n            <mat-option *ngIf=\"!items.length\" class=\"ion-no-padding\" [disabled]=\"true\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i;\"\n                         [size]=\"displayColumnSizes[i]\">\n                  <ion-text [innerHTML]=\"getPropertyByPath(item, attr) | highlight: { search: inputControl.value, withAccent: highlightAccent } \"></ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n          </ng-container>\n        </mat-autocomplete>\n\n        <button matSuffix mat-icon-button tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"onDropButtonClick.emit($event)\"\n                [hidden]=\"disabled\">\n          <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n        </button>\n        <button matSuffix mat-icon-button tabindex=\"-1\"\n                type=\"button\"\n                *ngIf=\"clearable\"\n                (click)=\"clearValue($event)\"\n                [hidden]=\"disabled || !formControl.value\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <ng-content matSuffix select=\"[matSuffix]\"></ng-content>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n      </mat-form-field>\n\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n",
-                providers: [
-                    {
+                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\" class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"keydownEscape.emit($event)\"\n                 (keyup.enter)=\"keyupEnter.emit($event)\"\n                 (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              <ion-text color=\"light\" *ngIf=\"last && itemCount; let count\" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>{{noResultMessage | translate}}</ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                         [size]=\"displayColumnSizes[i]\">\n                  <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent } \"></ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n        </mat-autocomplete>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         multi: true,
                         useExisting: forwardRef(() => MatChipsField)
-                    }
-                ],
+                    }],
+                encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}"]
+                styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.mat-form-field-suffix{position:absolute!important;right:0!important;top:calc(100% - 50px)!important}.mat-chip.mat-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-chip.mat-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-chip.mat-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-chip.mat-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-chip.mat-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}"]
             },] }
 ];
 MatChipsField.ctorParameters = () => [
@@ -7097,7 +7383,7 @@ MatChipsField.ctorParameters = () => [
     { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 MatChipsField.propDecorators = {
-    compareWith: [{ type: Input }],
+    equals: [{ type: Input }],
     logPrefix: [{ type: Input }],
     formControl: [{ type: Input }],
     formControlName: [{ type: Input }],
@@ -7116,16 +7402,27 @@ MatChipsField.propDecorators = {
     highlightAccent: [{ type: Input }],
     showAllOnFocus: [{ type: Input }],
     showPanelOnFocus: [{ type: Input }],
-    appAutofocus: [{ type: Input }],
+    autofocus: [{ type: Input }],
     config: [{ type: Input }],
     i18nPrefix: [{ type: Input }],
     noResultMessage: [{ type: Input }],
-    class: [{ type: Input }],
+    classList: [{ type: Input, args: ['class',] }],
+    panelWidth: [{ type: Input }],
+    matAutocompletePosition: [{ type: Input }],
+    itemSize: [{ type: Input }],
+    fetchMoreThreshold: [{ type: Input }],
+    suggestLengthThreshold: [{ type: Input }],
+    showLoadingSpinner: [{ type: Input }],
+    chipColor: [{ type: Input }],
     debug: [{ type: Input }],
     clicked: [{ type: Output }],
     blurred: [{ type: Output }],
     focused: [{ type: Output }],
+    dropButtonClick: [{ type: Output }],
+    keydownEscape: [{ type: Output, args: ['keydown.escape',] }],
+    keyupEnter: [{ type: Output, args: ['keyup.enter',] }],
     matInputText: [{ type: ViewChild, args: ['matInputText',] }],
+    autocomplete: [{ type: ViewChild, args: [MatAutocomplete,] }],
     autocompleteTrigger: [{ type: ViewChild, args: [MatAutocompleteTrigger,] }],
     filter: [{ type: Input }],
     tabindex: [{ type: Input }],
@@ -16239,7 +16536,7 @@ class AutocompleteTestPage {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
         this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
-        this.$items = new BehaviorSubject(undefined);
+        this._$items = new BehaviorSubject(undefined);
         this.autocompleteFields = new MatAutocompleteConfigHolder();
         this.memoryHide = false;
         this.memoryMobile = true;
@@ -16268,7 +16565,7 @@ class AutocompleteTestPage {
         });
         // From $items observable
         this.autocompleteFields.add('entity-$items', {
-            items: this.$items,
+            items: this._$items,
             attributes: ['label', 'name'],
             displayWith: this.entityToString
         });
@@ -16306,7 +16603,7 @@ class AutocompleteTestPage {
     }
     loadItems() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.$items.next(this._items.slice());
+            this._$items.next(this._items.slice());
         });
     }
     entityToString(item) {
@@ -16336,7 +16633,7 @@ class AutocompleteTestPage {
     doSubmit(event) {
         console.debug('Validate form: ', this.form.value);
     }
-    compareWithFn(o1, o2) {
+    equals(o1, o2) {
         return o1 && o2 && o1.id === o2.id;
     }
     toggleMode(value) {
@@ -16367,7 +16664,7 @@ class AutocompleteTestPage {
 AutocompleteTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-autocomplete-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [compareWith]=\"compareWithFn\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter('entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [compareWith]=\"compareWithFn\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n      <ion-col size=\"6\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-text color=\"primary\">\n                Readonly toggle\n              </ion-text>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid>\n              <ion-row>\n                <ion-col size=\"3\">\n                  <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                    Readonly ?\n                  </mat-checkbox>\n                </ion-col>\n              </ion-row>\n              <ion-row>\n                <ion-col>\n                  <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                          [config]=\"autocompleteFields.get('entity-items')\"\n                                          [placeholder]=\"'Entity'\"\n                                          [mobile]=\"true\"\n                                          [compareWith]=\"compareWithFn\"\n                                          [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                          [readonly]=\"true\"\n                                          [clearable]=\"!readonlyField.readonly\">\n                  </mat-autocomplete-field>\n                </ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [compareWith]=\"compareWithFn\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter('entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n      <ion-col size=\"6\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-text color=\"primary\">\n                Readonly toggle\n              </ion-text>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid>\n              <ion-row>\n                <ion-col size=\"3\">\n                  <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                    Readonly ?\n                  </mat-checkbox>\n                </ion-col>\n              </ion-row>\n              <ion-row>\n                <ion-col>\n                  <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                          [config]=\"autocompleteFields.get('entity-items')\"\n                                          [placeholder]=\"'Entity'\"\n                                          [mobile]=\"true\"\n                                          [equals]=\"equals\"\n                                          [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                          [readonly]=\"true\"\n                                          [clearable]=\"!readonlyField.readonly\">\n                  </mat-autocomplete-field>\n                </ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -16522,7 +16819,7 @@ class SwipeTestPage {
 SwipeTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-swipe-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Swipe test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Swipe page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <!-- empty -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"empty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [compareWithFn]=\"compareDate()\"\n                               [tabindex]=\"1\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- date -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"date\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [compareWithFn]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"2\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled empty\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledEmpty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [compareWithFn]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"3\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n<!--         read-only-->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled with date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledDate\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [compareWithFn]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"4\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Swipe test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Swipe page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <!-- empty -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"empty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [tabindex]=\"1\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- date -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"date\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"2\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled empty\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledEmpty\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"3\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n<!--         read-only-->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled with date\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-swipe-field formControlName=\"disabledDate\"\n                               placeholder=\"placeholder\"\n                               [items]=\"$dates\"\n                               [displayWith]=\"displayDate()\"\n                               [equals]=\"compareDate()\"\n                               [clearable]=\"true\"\n                               [tabindex]=\"4\"\n                               [debug]=\"true\"\n              >\n              </mat-swipe-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 SwipeTestPage.ctorParameters = () => [
@@ -16628,15 +16925,30 @@ class EntityTestClass {
 const FAKE_ENTITIES = [
     { id: 1, label: 'AAA', name: 'Item A' },
     { id: 2, label: 'BBB', name: 'Item B' },
-    { id: 3, label: 'CCC', name: 'Item C' }
+    { id: 3, label: 'CCC', name: 'Item C' },
+    { id: 4, label: 'DDD', name: 'Item D' },
+    { id: 5, label: 'EEE', name: 'Item E' },
+    { id: 6, label: 'FFF', name: 'Item F' },
+    { id: 7, label: 'GGG', name: 'Item G' }
 ];
-function deepCopy(values) {
-    return (values || FAKE_ENTITIES).map(entity => Object.assign({}, entity));
+function deepCopy(values, size) {
+    if (isNil(size)) {
+        return (values || FAKE_ENTITIES).map(entity => Object.assign({}, entity));
+    }
+    let result = [];
+    let i = 1;
+    while (result.length < size) {
+        result = result.concat((values || FAKE_ENTITIES).map(entity => {
+            const name = entity.name + ' #' + i;
+            return Object.assign(Object.assign({}, entity), { id: i++, name });
+        }));
+    }
+    return result.slice(0, size);
 }
 class ChipsTestPage {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this._items = deepCopy(FAKE_ENTITIES);
+        this._items = deepCopy(FAKE_ENTITIES, 100);
         this._$items = new BehaviorSubject(undefined);
         this.autocompleteFields = new MatAutocompleteConfigHolder();
         this.form = formBuilder.group({
@@ -16651,15 +16963,17 @@ class ChipsTestPage {
         this.autocompleteFields.add('entity-suggestFn', {
             suggestFn: (value, filter) => this.suggest(value, filter),
             attributes: ['label', 'name'],
-            displayWith: this.entityToString
+            displayWith: this.entityToString,
+            equals: (o1, o2) => EntityUtils.compare(o1, o2, 1, 'id') === 0
         });
         // From items
         this.autocompleteFields.add('entity-items', {
-            items: FAKE_ENTITIES.slice(),
+            items: this._items.slice(),
             attributes: ['label', 'name'],
-            displayWith: this.entityToString
+            displayWith: this.entityToString,
+            equals: (o1, o2) => EntityUtils.compare(o1, o2, 1, 'id') === 0
         });
-        // From items
+        // From $items observable
         this.autocompleteFields.add('entity-$items', {
             items: this._$items,
             attributes: ['label', 'name'],
@@ -16673,18 +16987,20 @@ class ChipsTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
+            const items = deepCopy(FAKE_ENTITIES);
             const data = {
-                entity: [],
-                // THis item is NOT in the items list => i should be displayed anyway
-                entityInitial: FAKE_ENTITIES.slice(1, 2),
-                disableEntity: FAKE_ENTITIES.slice(1, 2)
+                entity: items.slice(0, 1),
+                entityInitial: items.slice(1, 2),
+                disableEntity: items.slice(1, 2)
             };
             this.form.setValue(data);
+            // Load observables
+            setTimeout(() => this.loadItems(), 1000);
         });
     }
     loadItems() {
         return __awaiter(this, void 0, void 0, function* () {
-            this._$items.next(deepCopy(FAKE_ENTITIES));
+            this._$items.next(this._items.slice());
         });
     }
     entityToString(item) {
@@ -16692,13 +17008,29 @@ class ChipsTestPage {
     }
     suggest(value, filter) {
         return __awaiter(this, void 0, void 0, function* () {
-            return suggestFromArray(this._items, value, Object.assign(Object.assign({}, filter), { searchAttributes: ['label', 'name'] }));
+            filter = Object.assign({ offset: 0, size: 30 }, filter);
+            const res = suggestFromArray(this._items, value, Object.assign(Object.assign({}, filter), { searchAttributes: ['label', 'name'] }));
+            // Simulate a size = 30
+            const total = res.total || res.data.length;
+            const nextOffset = filter.offset + res.data.length;
+            if (nextOffset < total) {
+                filter = Object.assign(Object.assign({}, filter), { offset: nextOffset });
+                return {
+                    total,
+                    data: res.data,
+                    fetchMore: (variables) => __awaiter(this, void 0, void 0, function* () {
+                        yield sleep(1000);
+                        return this.suggest(value, Object.assign(Object.assign({}, filter), variables));
+                    })
+                };
+            }
+            return res;
         });
     }
     doSubmit(event) {
         console.debug('Validate form: ', this.form.value);
     }
-    compareWithFn(o1, o2) {
+    equals(o1, o2) {
         return o1 && o2 && o1.id === o2.id;
     }
     /* -- protected methods -- */
@@ -16709,7 +17041,7 @@ class ChipsTestPage {
 ChipsTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-chips-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [logPrefix]=\"'[mat-chips-empty] '\"\n                                      [compareWith]=\"compareWithFn\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[mat-chips-initialized] '\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[mat-chips-disabled] '\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-empty] '\"\n                               chipColor=\"accent\"\n                               [debug]=\"false\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-initialized] '\"\n                               chipColor=\"primary\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [equals]=\"equals\"\n                               [logPrefix]=\"'[mat-chips-disabled] '\"\n                               chipColor=\"warning\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 ChipsTestPage.ctorParameters = () => [
@@ -17253,11 +17585,18 @@ AuthForm.propDecorators = {
 };
 
 class AuthModal {
-    constructor(accountService, viewCtrl, changeDetectorRef) {
+    constructor(accountService, viewCtrl, cd) {
         this.accountService = accountService;
         this.viewCtrl = viewCtrl;
-        this.changeDetectorRef = changeDetectorRef;
-        this.loading = false;
+        this.cd = cd;
+    }
+    get loading() {
+        var _a;
+        return (_a = this.form) === null || _a === void 0 ? void 0 : _a.loading;
+    }
+    ngOnInit() {
+        this.form.markAsReady({ emitEvent: false });
+        this.form.markAsLoaded();
     }
     cancel() {
         this.viewCtrl.dismiss();
@@ -17267,10 +17606,10 @@ class AuthModal {
             if (this.form.disabled)
                 return;
             if (!this.form.valid) {
-                this.form.markAsTouched();
+                this.form.markAllAsTouched();
                 return;
             }
-            this.loading = true;
+            this.markAsLoading();
             try {
                 const data = this.form.value;
                 // Disable the form
@@ -17279,9 +17618,8 @@ class AuthModal {
                 return this.viewCtrl.dismiss(account);
             }
             catch (err) {
-                this.loading = false;
                 this.form.error = err && err.message || err;
-                this.markForCheck();
+                this.markAsLoaded();
                 // Enable the form
                 this.form.enable();
                 // Reset form error on next changes
@@ -17294,7 +17632,13 @@ class AuthModal {
         });
     }
     markForCheck() {
-        this.changeDetectorRef.markForCheck();
+        this.cd.markForCheck();
+    }
+    markAsLoading(opts) {
+        this.form.markAsLoading(opts);
+    }
+    markAsLoaded(opts) {
+        this.form.markAsLoaded(opts);
     }
 }
 AuthModal.decorators = [
@@ -24633,5 +24977,5 @@ const ErrorCodes = {
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0$5 as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, SharedMatBadgeIconModule as ɵc, MatBadgeIconDirective as ɵd, isFocusableElement as ɵe, MatBadgeIconTestPage as ɵf, RegisterForm as ɵg, AccountValidatorService as ɵh, RegisterModal as ɵi, UserSettingsValidatorService as ɵj, LocalSettingsValidatorService as ɵk, AppIconComponent as ɵl };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, SharedMatBadgeIconModule as ɵc, MatBadgeIconDirective as ɵd, isFocusableElement as ɵe, MatBadgeIconTestPage as ɵf, RegisterForm as ɵg, AccountValidatorService as ɵh, RegisterModal as ɵi, UserSettingsValidatorService as ɵj, LocalSettingsValidatorService as ɵk, AppIconComponent as ɵl };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map