@sumaris-net/ngx-components 1.6.0 → 1.6.4

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, HostBinding, 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$8, 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,10 @@ 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 compareWith = options.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
         const config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn,
             filter,
-            displayWith,
-            compareWith });
+            displayWith, equals: compareWith });
         this.fields[fieldName] = config;
         return config;
     }
@@ -991,11 +990,6 @@ 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;
 class MatAutocompleteField {
@@ -1004,14 +998,6 @@ class MatAutocompleteField {
         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.logPrefix = '[mat-autocomplete] ';
         this.formControlName = null;
         this.required = false;
@@ -1024,13 +1010,21 @@ class MatAutocompleteField {
         this.fetchMoreThreshold = '15%';
         this.suggestLengthThreshold = null;
         this.showLoadingSpinner = true;
+        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.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._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 +1033,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;
@@ -1109,6 +1103,7 @@ 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));
@@ -1123,20 +1118,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 +1144,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 +1162,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,11 +1181,7 @@ 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
@@ -1210,28 +1207,24 @@ class MatAutocompleteField {
         // DEBUG
         //tap(value => 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)), merge(this.$inputItems, this._$filter)
+            .pipe(filter(_ => this.searchable && this.enabled), map(_ => this.formControl.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 enough characters
+        filter(thresholdFilterFn), 
         // Distinguish changes
-        distinctUntilChanged()))
+        distinctUntilChanged(), 
+        // DEBUG
+        tap(value => console.debug(this.logPrefix + ' Received update event: ', value))))
             .pipe(
         // Suggest values
         mergeMap(value => this.suggest(value, this.filter)), 
@@ -1257,7 +1250,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,7 +1259,7 @@ 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))
@@ -1280,12 +1273,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 +1291,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 +1310,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 +1335,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();
         }
     }
     /**
@@ -1365,7 +1362,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 +1376,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,7 +1385,7 @@ class MatAutocompleteField {
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
-            //DEBUG console.debug(this.logPrefix + " Cancelling focus event");
+            //DEBUG console.debug(this.logPrefix + ' Cancelling focus event');
             return false;
         }
         const hasContent = selectInputContent(event);
@@ -1396,7 +1393,7 @@ class MatAutocompleteField {
         if (!hasContent || (this.showPanelOnFocus && this.showAllOnFocus)) {
             // DEBUG
             //console.debug(this.logPrefix + ' Emit focus event');
-            this.onFocus.emit(event);
+            this.focused.emit(event);
             return true;
         }
         return false;
@@ -1417,7 +1414,7 @@ class MatAutocompleteField {
         //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 +1422,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 +1439,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 +1461,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 +1469,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 +1505,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) {
@@ -1582,7 +1579,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 +1613,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      <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)=\"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                              [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><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 +1628,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 +1658,21 @@ MatAutocompleteField.propDecorators = {
     fetchMoreThreshold: [{ type: Input }],
     suggestLengthThreshold: [{ type: Input }],
     showLoadingSpinner: [{ 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,] }],
     animationsDisabled: [{ type: HostBinding, args: ['@.disabled',] }],
     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 {
@@ -6552,7 +6553,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 +6613,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 +6697,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 +6761,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 }],
@@ -6806,36 +6807,48 @@ class MatChipsField {
         this._onChangeCallback = (_) => { };
         this._onTouchedCallback = () => { };
         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.debug = false;
+        this.itemSize = '48px';
+        this.fetchMoreThreshold = '15%';
+        this.suggestLengthThreshold = null;
+        this.showLoadingSpinner = true;
+        this.chipColor = null;
         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 +6860,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 || [];
     }
@@ -6870,6 +6889,7 @@ class MatChipsField {
         return !this.readonly && this.formControl.enabled;
     }
     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 +6904,212 @@ 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'), tap(value => {
+            // DEBUG
+            //console.debug(this.logPrefix + ' object changes:', value)
+            // Update the display value (if need)
+            const displayValue = this.displayWith(value) || '';
+            // Apply to the input[type=text] field
+            if (this.matInputText && this.matInputText.nativeElement) {
+                this.matInputText.nativeElement.value = displayValue;
+            }
+        })
+        // DEBUG
+        //tap(value => 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.$filteredItems.complete();
+        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,19 +7130,21 @@ 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)
@@ -7012,6 +7161,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 +7184,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,10 +7193,68 @@ 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* () {
@@ -7064,7 +7276,7 @@ class MatChipsField {
                 this._itemCount = toNumber(total, data && data.length || 0);
             }
             // Filter out existing items
-            const filteredData = (res || []).slice().filter(item1 => this.value.findIndex(item2 => this.compareWith(item1, item2)) === -1);
+            const filteredData = (res || []).slice().filter(item1 => this.value.findIndex(item2 => this.equals(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));
             if (this.debug)
@@ -7072,15 +7284,64 @@ class MatChipsField {
             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;
+        }
+    }
+    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;
+    }
+    checkIfTouched() {
+        if (this.formControl.touched) {
+            this.cd.markForCheck();
+            this._onTouchedCallback();
+        }
+    }
     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",
+                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,
@@ -7088,8 +7349,9 @@ MatChipsField.decorators = [
                         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 +7359,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 +7378,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 }],
     debug: [{ type: Input }],
+    itemSize: [{ type: Input }],
+    fetchMoreThreshold: [{ type: Input }],
+    suggestLengthThreshold: [{ type: Input }],
+    showLoadingSpinner: [{ type: Input }],
+    chipColor: [{ 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 }],
@@ -16367,7 +16640,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]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                            [equals]=\"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                                      [equals]=\"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                                          [equals]=\"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;</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]=\"compareWithFn\"\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]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                      [equals]=\"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                                            [equals]=\"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"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -16522,7 +16795,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,7 +16901,11 @@ 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));
@@ -16651,13 +16928,15 @@ 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(),
             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', {
@@ -16698,7 +16977,7 @@ class ChipsTestPage {
     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 +16988,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]=\"true\"\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              ></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 +17532,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 +17553,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 +17565,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 +17579,13 @@ class AuthModal {
         });
     }
     markForCheck() {
-        this.changeDetectorRef.markForCheck();
+        this.cd.markForCheck();
+    }
+    markAsLoading(opts) {
+        this.form.markAsLoading(opts);
+    }
+    markAsLoaded(opts) {
+        this.form.markAsLoaded(opts);
     }
 }
 AuthModal.decorators = [
@@ -20478,6 +20769,7 @@ class EntitiesTableDataSource extends TableDataSource {
         this._useValidator = false;
         this._stopWatching$ = new Subject();
         this._editingRowCount = 0;
+        this._fetchMoreFn = null;
         this.loadingSubject = new BehaviorSubject(undefined);
         this._options = Object.assign({ dataServiceOptions: {}, debug: config && config.suppressErrors === false, keepOriginalDataAfterConfirm: false }, config);
         this._useValidator = isNotNil(validatorService);
@@ -20510,6 +20802,7 @@ class EntitiesTableDataSource extends TableDataSource {
     watchAll(offset, size, sortBy, sortDirection, filter) {
         this._stopWatching$.next();
         this._editingRowCount = 0;
+        this._fetchMoreFn = null;
         this.markAsLoading();
         return this.dataService.watchAll(offset, size, sortBy, sortDirection, filter, this.serviceOptions)
             .pipe(
@@ -20523,6 +20816,7 @@ class EntitiesTableDataSource extends TableDataSource {
             }
             else {
                 this.updateDatasource((res.data || []));
+                this._fetchMoreFn = res.fetchMore;
             }
             return res;
         }));
@@ -20751,6 +21045,37 @@ class EntitiesTableDataSource extends TableDataSource {
             this._creating = false;
         });
     }
+    getData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rows = yield this.getRows();
+            return this.getDataFromRows(rows);
+        });
+    }
+    fetchMore(opts) {
+        const _super = Object.create(null, {
+            updateDatasource: { get: () => super.updateDatasource }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._fetchMoreFn)
+                return false; // Avoid multiple call
+            if (this._editingRowCount > 0) {
+                console.warn('Cannot fetch more because still editing row');
+                return;
+            }
+            // Fetch next page
+            this._fetchMoreFn = null; // Avoid multiple call
+            const res = yield this._fetchMoreFn();
+            // Skip if empty (no more data)
+            if (isNotEmptyArray(res === null || res === void 0 ? void 0 : res.data))
+                return false;
+            // Update the data source
+            const existingData = yield this.getData();
+            _super.updateDatasource.call(this, existingData.concat(...res.data), opts);
+            // Remember fetchMore
+            this._fetchMoreFn = res.fetchMore;
+            return true;
+        });
+    }
     /* -- protected method -- */
     markAsLoading() {
         if (this.loadingSubject.value !== true) {