@sumaris-net/ngx-components 1.6.0 → 1.6.4

package/bundles/sumaris-net.ngx-components.umd.js

@@ -1262,11 +1262,10 @@
             var attributesOrFn = attributes.map(function (a, index) { return typeof a === 'function' && options.attributes[index] || a; });
             var filter = Object.assign({ searchAttribute: attributes.length === 1 ? attributes[0] : undefined, searchAttributes: attributes.length > 1 ? attributes : undefined }, options.filter);
             var displayWith = options.displayWith || (function (obj) { return obj && joinPropertiesPath(obj, attributes); });
-            var compareWith = options.compareWith || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
+            var compareWith = options.equals || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
             var config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn: suggestFn,
                 filter: filter,
-                displayWith: displayWith,
-                compareWith: compareWith });
+                displayWith: displayWith, equals: compareWith });
             this.fields[fieldName] = config;
             return config;
         };
@@ -1278,11 +1277,6 @@
         };
         return MatAutocompleteConfigHolder;
     }());
-    var DEFAULT_VALUE_ACCESSOR$6 = {
-        provide: i1.NG_VALUE_ACCESSOR,
-        useExisting: i0.forwardRef(function () { return MatAutocompleteField; }),
-        multi: true
-    };
     var noop$7 = function () { };
     var ɵ0$a = noop$7;
     var MatAutocompleteField = /** @class */ (function () {
@@ -1291,14 +1285,6 @@
             this.formGroupDir = formGroupDir;
             this._onChangeCallback = noop$7;
             this._onTouchedCallback = noop$7;
-            this._subscription = new rxjs.Subscription();
-            this._filter$ = new rxjs.BehaviorSubject(undefined);
-            this._reload$ = new rxjs.Subject();
-            this._readonly = false;
-            this.$inputItems = new rxjs.BehaviorSubject(undefined);
-            this.$filteredItems = new rxjs.BehaviorSubject(undefined);
-            this.displayValue = '';
-            this._fetchMore$ = new i0.EventEmitter();
             this.logPrefix = '[mat-autocomplete] ';
             this.formControlName = null;
             this.required = false;
@@ -1311,13 +1297,21 @@
             this.fetchMoreThreshold = '15%';
             this.suggestLengthThreshold = null;
             this.showLoadingSpinner = true;
+            this.clicked = new i0.EventEmitter();
+            this.blurred = new i0.EventEmitter();
+            this.focused = new i0.EventEmitter();
+            this.dropButtonClick = new i0.EventEmitter(true);
+            this.keydownEscape = new i0.EventEmitter();
+            this.keyupEnter = new i0.EventEmitter();
             this.animationsDisabled = true;
-            this.onClick = new i0.EventEmitter();
-            this.onBlur = new i0.EventEmitter();
-            this.onFocus = new i0.EventEmitter();
-            this.onDropButtonClick = new i0.EventEmitter(true);
-            this.onKeydownEscape = new i0.EventEmitter();
-            this.onKeyupEnter = new i0.EventEmitter();
+            this._readonly = false;
+            this.$inputItems = new rxjs.BehaviorSubject(undefined);
+            this.$filteredItems = new rxjs.BehaviorSubject(undefined);
+            this.displayValue = '';
+            this._fetchMore$ = new i0.EventEmitter();
+            this._subscription = new rxjs.Subscription();
+            this._$filter = new rxjs.BehaviorSubject(undefined);
+            this._reload$ = new rxjs.Subject();
         }
         Object.defineProperty(MatAutocompleteField.prototype, "itemCount", {
             get: function () {
@@ -1335,13 +1329,13 @@
         });
         Object.defineProperty(MatAutocompleteField.prototype, "filter", {
             get: function () {
-                return this._filter$.value;
+                return this._$filter.value;
             },
             set: function (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);
                 }
             },
             enumerable: false,
@@ -1434,6 +1428,7 @@
                 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));
@@ -1448,21 +1443,18 @@
             this.displayColumnSizes = this.displayColumnSizes
                 // if only column: auto size
                 || (this.displayAttributes.length === 1 && [undefined])
-                || this.displayAttributes.map(function (attr) {
-                    // If label, set col size = 2
-                    return (attr && attr.endsWith('label')) ? 2 :
-                        // If rankOrder => col size = 1
-                        ((attr && attr.endsWith('rankOrder')) ? 1
-                            // Else => auto size
-                            : undefined);
-                });
+                // Computed column size:
+                // - if label then col size = 2
+                // - if rankOrder then col size = 1
+                // - ese => auto size
+                || this.displayAttributes.map(function (attr) { return (attr && attr.endsWith('label')) ? 2
+                    : ((attr && attr.endsWith('rankOrder')) ? 1
+                        : undefined); });
             this.displayColumnNames = this.displayAttributes.map(function (attr, index) { return _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 = function (o1, o2) { return o1 && o2 && o1.id === o2.id; };
+            this.equals = this.equals || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
             var 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')
@@ -1478,7 +1470,7 @@
                 var suggestFromArrayFn_1 = function (value, filter) { return __awaiter(_this, void 0, void 0, function () {
                     return __generator(this, function (_e) {
                         // DEBUG
-                        //console.debug(this.logPrefix + " Calling suggestFromArray with value=", value);
+                        //console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
                         return [2 /*return*/, suggestFromArray(this.$inputItems.value, value, Object.assign({ searchAttributes: this.displayAttributes }, filter))];
                     });
                 }); };
@@ -1505,10 +1497,18 @@
             }
             else if (!this.searchable) {
                 // Manually fill input items, from the given suggest function
-                this._subscription.add(this._filter$.pipe(operators.startWith(this.filter), operators.debounceTime(250), operators.takeWhile(function (_) { return !_this.searchable; }), // Close subscription, when enabling search (no more mat-select)
+                this._subscription.add(this._$filter.pipe(operators.startWith(this.filter), operators.debounceTime(250), operators.takeWhile(function (_) { return !_this.searchable; }), // Close subscription, when enabling search (no more mat-select)
                 operators.switchMap(function (filter) { return _this.suggest('*', filter); }))
                     .subscribe(function (items) { return _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
+            var thresholdFilterFn = function (value) { return (isNilOrBlank(value) || (value === '*')
+                ? (_this.suggestLengthThreshold <= 0)
+                : (!(typeof value === 'string')
+                    || value.length >= _this.suggestLengthThreshold)); };
             var filteredItemsChanges = rxjs.merge(
             // Reload event (no distinctUntilChanged() pipe, to force reload even if same value)
             this._reload$, 
@@ -1516,11 +1516,7 @@
             this.formControl.valueChanges
                 .pipe(operators.filter(function (value) { return _this.enabled && _this.searchable && isNotNilString(value); }), 
             // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
-            operators.tap(function (value) {
-                if (_this.showLoadingSpinner) {
-                    _this.markAsLoading();
-                }
-            }), 
+            operators.tap(function (_) { return _this.showLoadingSpinner && _this.markAsLoading(); }), 
             // Filter if not enough character
             operators.filter(function (value) { return value.length >= _this.suggestLengthThreshold; }), 
             // Wait a debounce time
@@ -1546,28 +1542,24 @@
             // DEBUG
             //tap(value => console.debug(this.logPrefix + ' Received an object value: ', value))
             ), 
+            // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
+            this.dropButtonClick
+                .pipe(operators.filter(function (event) { return _this.searchable && _this.enabled && (!event || !event.defaultPrevented); }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; }), 
+            // Make enough characters
+            operators.filter(thresholdFilterFn)), 
             // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
             rxjs.merge(
             // Focus or click => Load all
-            rxjs.merge(this.onFocus, this.onClick)
-                .pipe(operators.filter(function (_) { return _this.enabled && _this.searchable; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; })), 
-            // On dropdown button click
-            this.onDropButtonClick
-                .pipe(operators.filter(function (event) { return _this.enabled && _this.searchable && (!event || !event.defaultPrevented); }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; })), rxjs.merge(this.$inputItems, this._filter$)
-                .pipe(operators.filter(function (event) { return _this.enabled && _this.searchable; }), operators.map(function (_) { return _this.formControl.value; })))
+            rxjs.merge(this.focused, this.clicked)
+                .pipe(operators.filter(function (_) { return _this.enabled && _this.searchable; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; })), rxjs.merge(this.$inputItems, this._$filter)
+                .pipe(operators.filter(function (_) { return _this.searchable && _this.enabled; }), operators.map(function (_) { return _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
-            operators.filter(function (value) { return value === '*'
-                || (isNil(value)
-                    ? (_this.suggestLengthThreshold <= 0)
-                    : (!(typeof value === 'string')
-                        || value.length >= _this.suggestLengthThreshold)); }), 
+            // Make enough characters
+            operators.filter(thresholdFilterFn), 
             // Distinguish changes
-            operators.distinctUntilChanged()))
+            operators.distinctUntilChanged(), 
+            // DEBUG
+            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Received update event: ', value); })))
                 .pipe(
             // Suggest values
             operators.mergeMap(function (value) { return _this.suggest(value, _this.filter); }), 
@@ -1593,7 +1585,7 @@
                 // Make sure control value is inside (mat-select)
                 if (items && !_this.searchable) {
                     var value_1 = _this.formControl.value;
-                    if (isNotNil(value_1) && typeof value_1 === 'object' && items.findIndex(function (item) { return _this.compareWith(item, value_1); }) === -1) {
+                    if (isNotNil(value_1) && typeof value_1 === 'object' && items.findIndex(function (item) { return _this.equals(item, value_1); }) === -1) {
                         // If form value is missing: add it to the list
                         items = items.concat(value_1);
                     }
@@ -1602,7 +1594,7 @@
                 _this.$filteredItems.next(items);
             }));
             // Applying implicit value, on blur
-            this._subscription.add(this.onBlur
+            this._subscription.add(this.blurred
                 .pipe(
             // Skip if not searchable
             operators.filter(function (_) { return _this.searchable; }), operators.map(function (_) { return _this.formControl.value; }))
@@ -1616,12 +1608,14 @@
                     _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
             }));
@@ -1632,7 +1626,7 @@
             operators.distinctUntilChanged())
                 // Update component state
                 .subscribe(function () { return _this.checkIfTouched(); }));
-            this._subscription.add(this.onKeydownEscape.subscribe(function (event) {
+            this._subscription.add(this.keydownEscape.subscribe(function (event) {
                 if (_this.isOpen) {
                     event === null || event === void 0 ? void 0 : event.stopPropagation();
                     event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -1651,20 +1645,22 @@
                 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;
@@ -1674,8 +1670,8 @@
             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();
             }
         };
         /**
@@ -1701,7 +1697,7 @@
         };
         MatAutocompleteField.prototype.setDisabledState = function (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();
@@ -1715,7 +1711,7 @@
                 (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.focus();
             }
         };
-        MatAutocompleteField.prototype.filterInputTextFocusInEvent = function (event) {
+        MatAutocompleteField.prototype.filterInputTextFocusEvent = function (event) {
             if (!event || event.defaultPrevented)
                 return;
             // Ignore event from mat-option
@@ -1724,7 +1720,7 @@
                 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;
             }
             var hasContent = selectInputContent(event);
@@ -1732,7 +1728,7 @@
             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;
@@ -1753,7 +1749,7 @@
             //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;
         };
         MatAutocompleteField.prototype.filterMatSelectFocusEvent = function (event) {
@@ -1761,7 +1757,7 @@
                 return;
             // DEBUG
             // console.debug(this.logPrefix + " Received <mat-select> focus event", event);
-            this.onFocus.emit(event);
+            this.focused.emit(event);
         };
         MatAutocompleteField.prototype.filterMatSelectBlurEvent = function (event) {
             if (!event || event.defaultPrevented)
@@ -1778,7 +1774,7 @@
                 // console.debug(this.logPrefix + " Cancelling <mat-select> blur event");
                 return false;
             }
-            this.onBlur.emit(event);
+            this.blurred.emit(event);
             return true;
         };
         MatAutocompleteField.prototype.toggleSearch = function (event) {
@@ -1801,7 +1797,7 @@
         };
         MatAutocompleteField.prototype._initAutocompleteInfiniteScroll = function (threshold) {
             var _this = this;
-            if (!this.matAutocomplete)
+            if (!this.autocomplete)
                 return; // Skip
             // DEBUG
             //console.debug(this.logPrefix + ' Init autocomplete scroll listener');
@@ -1809,12 +1805,12 @@
                 this._openedSubscription.unsubscribe();
                 this._subscription.remove(this._openedSubscription);
             }
-            var opened$ = this.matAutocomplete._isOpen
+            var opened$ = this.autocomplete._isOpen
                 ? rxjs.timer(0)
-                : this.matAutocomplete.opened.pipe(operators.debounceTime(200));
+                : this.autocomplete.opened.pipe(operators.debounceTime(200));
             var scrollEnd$ = opened$
                 .pipe(operators.map(function (_) { return _this.getAutocompletePanel(); }), operators.filter(isNotNil), operators.switchMap(function (panel) { return fromScrollEndEvent(panel, threshold)
-                .pipe(operators.takeUntil(_this.matAutocomplete.closed)); }));
+                .pipe(operators.takeUntil(_this.autocomplete.closed)); }));
             // Trigger fetch more, end end scroll reached
             this._openedSubscription = scrollEnd$
                 .subscribe(function () { return _this._fetchMore$.emit(); });
@@ -1847,7 +1843,7 @@
         Object.defineProperty(MatAutocompleteField.prototype, "isOpen", {
             get: function () {
                 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;
             },
@@ -1856,8 +1852,8 @@
         });
         MatAutocompleteField.prototype.closePanel = function () {
             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) {
@@ -1938,7 +1934,7 @@
         };
         MatAutocompleteField.prototype.getAutocompletePanel = function () {
             var _a, _b;
-            var ele = (_b = (_a = this.matAutocomplete) === null || _a === void 0 ? void 0 : _a.options.last) === null || _b === void 0 ? void 0 : _b._getHostElement().parentElement;
+            var 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...');
@@ -1973,10 +1969,14 @@
         { type: i0.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: i1.NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: i0.forwardRef(function () { return MatAutocompleteField; })
+                        }],
                     changeDetection: i0.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 = function () { return [
@@ -1984,7 +1984,7 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatAutocompleteField.propDecorators = {
-        compareWith: [{ type: i0.Input }],
+        equals: [{ type: i0.Input }],
         logPrefix: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
@@ -2014,21 +2014,21 @@
         fetchMoreThreshold: [{ type: i0.Input }],
         suggestLengthThreshold: [{ type: i0.Input }],
         showLoadingSpinner: [{ type: i0.Input }],
+        clicked: [{ type: i0.Output, args: ['click',] }],
+        blurred: [{ type: i0.Output, args: ['blur',] }],
+        focused: [{ type: i0.Output, args: ['focus',] }],
+        dropButtonClick: [{ type: i0.Output }],
+        keydownEscape: [{ type: i0.Output, args: ['keydown.escape',] }],
+        keyupEnter: [{ type: i0.Output, args: ['keyup.enter',] }],
+        matSelect: [{ type: i0.ViewChild, args: ['matSelect',] }],
+        matInputText: [{ type: i0.ViewChild, args: ['matInputText',] }],
+        autocomplete: [{ type: i0.ViewChild, args: [autocomplete.MatAutocomplete,] }],
+        autocompleteTrigger: [{ type: i0.ViewChild, args: [autocomplete.MatAutocompleteTrigger,] }],
         animationsDisabled: [{ type: i0.HostBinding, args: ['@.disabled',] }],
         filter: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         tabindex: [{ type: i0.Input }],
-        items: [{ type: i0.Input }],
-        onClick: [{ type: i0.Output, args: ['click',] }],
-        onBlur: [{ type: i0.Output, args: ['blur',] }],
-        onFocus: [{ type: i0.Output, args: ['focus',] }],
-        onDropButtonClick: [{ type: i0.Output, args: ['dropButtonClick',] }],
-        onKeydownEscape: [{ type: i0.Output, args: ['keydown.escape',] }],
-        onKeyupEnter: [{ type: i0.Output, args: ['keyup.enter',] }],
-        matSelect: [{ type: i0.ViewChild, args: ['matSelect',] }],
-        matInputText: [{ type: i0.ViewChild, args: ['matInputText',] }],
-        matAutocomplete: [{ type: i0.ViewChild, args: [autocomplete.MatAutocomplete,] }],
-        matAutocompleteTrigger: [{ type: i0.ViewChild, args: [autocomplete.MatAutocompleteTrigger,] }]
+        items: [{ type: i0.Input }]
     };
 
     var DateFormatPipe = /** @class */ (function () {
@@ -7347,7 +7347,7 @@
             // Default values
             this.displayAttributes = this.displayAttributes || ['label', 'name'];
             this.displayWith = this.displayWith || (function (obj) { return obj && joinPropertiesPath(obj, _this.displayAttributes); });
-            this.compareWithFn = this.compareWithFn || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
+            this.equals = this.equals || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
             this.mobile = toBoolean(this.mobile, false);
         };
         MatSwipeField.prototype.ngOnDestroy = function () {
@@ -7409,7 +7409,7 @@
             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();
@@ -7498,7 +7498,7 @@
         MatSwipeField.prototype.updateSlides = function () {
             var _this = this;
             if (this.showSlides) {
-                var itemIndex = (this.$items.getValue() || []).findIndex(function (value) { return _this.compareWithFn(value, _this._value); });
+                var itemIndex = (this.$items.getValue() || []).findIndex(function (value) { return _this.equals(value, _this._value); });
                 if (itemIndex >= 0) {
                     this.slideTo(itemIndex);
                 }
@@ -7585,7 +7585,7 @@
         required: [{ type: i0.Input }],
         mobile: [{ type: i0.Input }],
         clearable: [{ type: i0.Input }],
-        compareWithFn: [{ type: i0.Input }],
+        equals: [{ type: i0.Input }],
         displayWith: [{ type: i0.Input }],
         displayAttributes: [{ type: i0.Input }],
         appAutofocus: [{ type: i0.Input }],
@@ -7634,23 +7634,32 @@
             this._onChangeCallback = function (_) { };
             this._onTouchedCallback = function () { };
             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 i0.EventEmitter();
             this.blurred = new i0.EventEmitter();
             this.focused = new i0.EventEmitter();
+            this.dropButtonClick = new i0.EventEmitter(true);
+            this.keydownEscape = new i0.EventEmitter();
+            this.keyupEnter = new i0.EventEmitter();
             this.$inputItems = new rxjs.BehaviorSubject(undefined);
-            this.onDropButtonClick = new i0.EventEmitter(true);
+            this.$filteredItems = new rxjs.BehaviorSubject(undefined);
             this.inputControl = new i1.FormControl();
-            this.getPropertyByPath = getPropertyByPath;
+            this._fetchMore$ = new i0.EventEmitter();
             this._subscription = new rxjs.Subscription();
             this._$filter = new rxjs.BehaviorSubject(undefined);
+            this._reload$ = new rxjs.Subject();
         }
         Object.defineProperty(MatChipsField.prototype, "itemCount", {
             get: function () {
@@ -7659,14 +7668,21 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MatChipsField.prototype, "canFetchMore", {
+            get: function () {
+                return this._onFetchMoreCallback && this._moreItemsCount > 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MatChipsField.prototype, "filter", {
             get: function () {
-                return this._$filter.getValue();
+                return this._$filter.value;
             },
             set: function (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);
                 }
             },
@@ -7685,19 +7701,25 @@
             configurable: true
         });
         Object.defineProperty(MatChipsField.prototype, "items", {
+            get: function () {
+                return this.$inputItems;
+            },
             set: function (value) {
                 var _this = this;
                 // 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 (rxjs.isObservable(value)) {
-                    this._itemsSubscription = this._subscription.add(value.subscribe(function (v) { return _this.$inputItems.next(v); }));
+                    this._itemsSubscription = this._subscription.add(value.subscribe(function (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);
                     }
                 }
@@ -7728,6 +7750,7 @@
         });
         MatChipsField.prototype.ngOnInit = function () {
             var _this = this;
+            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>.');
@@ -7742,101 +7765,222 @@
                 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 || (function (obj) { return obj && joinPropertiesPath(obj, _this.displayAttributes); });
-            this.compareWith = this.compareWith || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
-            this.displayColumnSizes = this.displayColumnSizes || this.displayAttributes.map(function (attr) { return (
-            // 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(function (attr) { return (attr && attr.endsWith('label')) ? 2
+                    : ((attr && attr.endsWith('rankOrder')) ? 1
+                        : undefined); });
             this.displayColumnNames = this.displayAttributes.map(function (attr, index) { return _this.displayColumnNames && _this.displayColumnNames[index] ||
                 (_this.i18nPrefix + changeCaseToUnderscore(attr).toUpperCase()); });
             this.mobile = toBoolean(this.mobile, false);
+            this.equals = this.equals || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
+            var 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) {
                 var suggestFromArrayFn_1 = function (value, filter) { return __awaiter(_this, void 0, void 0, function () {
-                    var _a, data, total;
-                    return __generator(this, function (_b) {
-                        switch (_b.label) {
-                            case 0:
-                                if (this.debug)
-                                    console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
-                                return [4 /*yield*/, suggestFromArray(this.$inputItems.getValue(), value, Object.assign({ searchAttributes: this.displayAttributes }, filter))];
-                            case 1:
-                                _a = _b.sent(), data = _a.data, total = _a.total;
-                                this._itemCount = toNumber(total, data && data.length || 0);
-                                return [2 /*return*/, { data: data, total: total }];
-                        }
+                    return __generator(this, function (_c) {
+                        if (this.debug)
+                            console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
+                        return [2 /*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 = function (value, filter) { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
+                    return __generator(this, function (_c) {
+                        switch (_c.label) {
                             case 0:
-                                if (!isNil(this.$inputItems.getValue())) return [3 /*break*/, 2];
+                                if (!isNil(this.$inputItems.value)) return [3 /*break*/, 2];
                                 if (this.debug)
                                     console.debug('[mat-chips] Waiting items to be set...');
                                 return [4 /*yield*/, firstNotNilPromise(this.$inputItems)];
                             case 1:
-                                _a.sent();
+                                _c.sent();
                                 if (this.debug)
-                                    console.debug('[mat-chips] Received items:', this.$inputItems.getValue());
-                                _a.label = 2;
+                                    console.debug('[mat-chips] Received items:', this.$inputItems.value);
+                                _c.label = 2;
                             case 2:
                                 this.suggestFn = suggestFromArrayFn_1;
-                                return [2 /*return*/, this.suggest(value, filter)]; // Loop
+                                return [2 /*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(operators.filter(function (event) { return (!event || !event.defaultPrevented) && _this.formControl.enabled; }))
-                .subscribe(function () {
-                _this.matInputText.nativeElement.focus();
-            }));
-            var updateFilteredItemsEvents$ = rxjs.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
+            var thresholdFilterFn = function (value) { return (isNilOrBlank(value) || (value === '*')
+                ? (_this.suggestLengthThreshold <= 0)
+                : (!(typeof value === 'string')
+                    || value.length >= _this.suggestLengthThreshold)); };
+            var filteredItemsChanges = rxjs.merge(
+            // Reload event (no distinctUntilChanged() pipe, to force reload even if same value)
+            this._reload$, this.inputControl.valueChanges
+                .pipe(operators.filter(function (value) { return _this.enabled && isNotNilString(value); }), 
+            // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
+            operators.tap(function (_) { return _this.showLoadingSpinner && _this.markAsLoading(); }), 
+            // Filter if not enough character
+            operators.filter(function (value) { return value.length >= _this.suggestLengthThreshold; }), 
+            // Wait a debounce time
+            operators.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(operators.startWith(this.inputControl.value), operators.filter(function (value) { return isNotNil(value) && typeof value === 'object'; }), operators.tap(function (value) {
+                // DEBUG
+                //console.debug(this.logPrefix + ' object changes:', value)
+                // Update the display value (if need)
+                var 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(operators.filter(function (event) { return _this.enabled && (!event || !event.defaultPrevented); }), operators.tap(function (_) { return _this.matInputText.nativeElement.focus(); }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; }), 
+            // Make sure there is enough characters
+            operators.filter(thresholdFilterFn)), 
+            // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
+            rxjs.merge(
             // Focus or click => Load all
             rxjs.merge(this.focused, this.clicked)
-                .pipe(operators.filter(function (_) { return _this.enabled; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.inputControl.value; })), this.inputControl.valueChanges
-                .pipe(operators.startWith(this.inputControl.value), operators.filter(function (value) { return (isNotNil(value) && typeof value === 'object') || (isNotNilString(value) && !value.includes('**')); }), operators.tap(function (value) {
-                if (_this.debug)
-                    console.debug(_this.logPrefix + ' valueChanges:', value);
-            }), operators.debounceTime(this.debounceTime)), this.$inputItems
-                .pipe(operators.map(function () { return _this.formControl.value; })), this._$filter
-                .pipe(operators.map(function () { return _this.formControl.value; })));
-            this.filteredItems$ = updateFilteredItemsEvents$
-                .pipe(operators.distinctUntilChanged(), 
-            //tap(value => this.debug && console.debug(this.logPrefix + " Received update event: ", value)),
-            operators.switchMap(function (value) { return _this.suggest(value, _this.filter); }));
+                .pipe(operators.filter(function (_) { return _this.enabled; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.inputControl.value; })), rxjs.merge(this.$inputItems, this._$filter)
+                .pipe(operators.filter(function (_) { return _this.enabled; }), operators.map(function (_) { return _this.inputControl.value; })))
+                .pipe(
+            // Make sure there is enough characters
+            operators.filter(thresholdFilterFn), 
+            // Distinguish changes
+            operators.distinctUntilChanged()))
+                .pipe(
+            // Suggest values
+            operators.mergeMap(function (value) { return _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)
+            operators.tap(function (items) { return _this.updateImplicitValue(items); }));
+            // Fetch more events
+            var fetchMoreItemsChanges = this._fetchMore$
+                .pipe(operators.tap(function (event) { return event === null || event === void 0 ? void 0 : event.preventDefault(); }), // Avoid to close the mat-select
+            operators.filter(function () { return _this.canFetchMore; }), operators.mergeMap(function () { return _this.fetchMore(); }), 
+            // DEBUG
+            //tap(moreItems => console.debug(this.logPrefix + ' Received from fetch More: ', moreItems)),
+            // Concat to existing items
+            operators.map(function (moreItems) { return (_this.$filteredItems.value || []).concat(moreItems); }));
+            // Update filtered items
+            this._subscription.add(rxjs.merge(this.$inputItems, 
+            // Update items events
+            filteredItemsChanges, 
+            // Fetch more events
+            fetchMoreItemsChanges)
+                // Emit items
+                .subscribe(function (items) { return _this.$filteredItems.next(items); }));
+            // Applying implicit value, on blur
+            this._subscription.add(this.blurred
+                .pipe(operators.map(function (_) { return _this.formControl.value; }))
+                .subscribe(function (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),
+            operators.distinctUntilChanged())
+                // Update component state
+                .subscribe(function () { return _this.checkIfTouched(); }));
+            this._subscription.add(this.keydownEscape.subscribe(function (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();
+                }
+            }));
         };
         MatChipsField.prototype.ngOnDestroy = function () {
             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
@@ -7857,19 +8001,21 @@
          * @param item
          */
         MatChipsField.prototype.remove = function (item) {
-            var index = this.value && this.value.indexOf(item);
-            if (index >= 0) {
-                var value = this.value.slice();
-                value.splice(index, 1);
-                this.writeValue(value);
-                this.inputControl.setValue('');
+            var value = this.value;
+            var index = value ? value.indexOf(item) : -1;
+            if (index !== -1) {
+                var 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
          */
-        MatChipsField.prototype.reloadItems = function () {
-            this.onDropButtonClick.emit();
+        MatChipsField.prototype.reloadItems = function (value) {
+            // Force a refresh
+            this._reload$.next(value || '*');
         };
         MatChipsField.prototype.writeValue = function (value) {
             if (this.debug)
@@ -7886,6 +8032,10 @@
             this._onTouchedCallback = fn;
         };
         MatChipsField.prototype.setDisabledState = function (isDisabled) {
+            var _a;
+            if (isDisabled && ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+                this.closePanel();
+            }
             this.cd.markForCheck();
         };
         MatChipsField.prototype.focus = function () {
@@ -7905,6 +8055,7 @@
                 return false;
             }
             var 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');
@@ -7913,20 +8064,83 @@
             }
             return false;
         };
+        MatChipsField.prototype.filterInputTextBlurEvent = function (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;
+        };
+        MatChipsField.prototype.filterChipsFocusEvent = function (event) {
+            // DEBUG
+            if (this.debug)
+                console.debug(this.logPrefix + ' Focus in chips list', event);
+            // Ignore event in button
+            this.matInputText.nativeElement.focus();
+        };
         MatChipsField.prototype.clearValue = function (event) {
             this.writeValue(null);
             event.stopPropagation();
         };
+        MatChipsField.prototype._initAutocompleteInfiniteScroll = function (threshold) {
+            var _this = this;
+            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);
+            }
+            var opened$ = this.autocomplete._isOpen
+                ? rxjs.timer(0)
+                : this.autocomplete.opened.pipe(operators.debounceTime(200));
+            var scrollEnd$ = opened$
+                .pipe(operators.map(function (_) { return _this.getAutocompletePanel(); }), operators.filter(isNotNil), operators.switchMap(function (panel) { return fromScrollEndEvent(panel, threshold)
+                .pipe(operators.takeUntil(_this.autocomplete.closed)); }));
+            // Trigger fetch more, end end scroll reached
+            this._openedSubscription = scrollEnd$
+                .subscribe(function () { return _this._fetchMore$.emit(); });
+            // Register subscription
+            this._subscription.add(this._openedSubscription);
+        };
+        Object.defineProperty(MatChipsField.prototype, "isOpen", {
+            get: function () {
+                var _a;
+                return ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen) || false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MatChipsField.prototype.closePanel = function () {
+            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 -- */
         MatChipsField.prototype.suggest = function (value, filter) {
             return __awaiter(this, void 0, void 0, function () {
                 var res, data, total, filteredData;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0: return [4 /*yield*/, this.suggestFn(value, filter)];
                         case 1:
-                            res = _a.sent();
+                            res = _c.sent();
                             // DEBUG
                             // console.debug(this.logPrefix + " Filtered items by suggestFn:", value, res);
                             if (!res) {
@@ -7942,7 +8156,7 @@
                                 res = data;
                                 this._itemCount = toNumber(total, data && data.length || 0);
                             }
-                            filteredData = (res || []).slice().filter(function (item1) { return _this.value.findIndex(function (item2) { return _this.compareWith(item1, item2); }) === -1; });
+                            filteredData = (res || []).slice().filter(function (item1) { return _this.value.findIndex(function (item2) { return _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)
@@ -7952,16 +8166,72 @@
                 });
             });
         };
+        MatChipsField.prototype.fetchMore = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var fetchMoreFn, _c, data, total, fetchMore;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!this._onFetchMoreCallback)
+                                return [2 /*return*/, []];
+                            fetchMoreFn = this._onFetchMoreCallback;
+                            this._onFetchMoreCallback = undefined;
+                            return [4 /*yield*/, fetchMoreFn()];
+                        case 1:
+                            _c = _d.sent(), data = _c.data, total = _c.total, fetchMore = _c.fetchMore;
+                            this._itemCount = total || this._itemCount;
+                            this._onFetchMoreCallback = fetchMore;
+                            this._moreItemsCount = Math.max(0, this._moreItemsCount - data.length); // Borne min = 0
+                            return [2 /*return*/, data];
+                    }
+                });
+            });
+        };
+        MatChipsField.prototype.updateImplicitValue = function (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;
+            }
+        };
+        MatChipsField.prototype.getAutocompletePanel = function () {
+            var _a, _b;
+            var 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;
+        };
+        MatChipsField.prototype.checkIfTouched = function () {
+            if (this.formControl.touched) {
+                this.cd.markForCheck();
+                this._onTouchedCallback();
+            }
+        };
         MatChipsField.prototype.markForCheck = function () {
             this.cd.markForCheck();
         };
+        MatChipsField.prototype.markAsLoading = function () {
+            if (this.$filteredItems.value) {
+                this.$filteredItems.next(undefined);
+                this._itemCount = undefined;
+                this._implicitValue = undefined;
+                this._onFetchMoreCallback = undefined;
+                this._moreItemsCount = 0;
+                this.markForCheck();
+            }
+        };
         return MatChipsField;
     }());
     MatChipsField.decorators = [
         { type: i0.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: i1.NG_VALUE_ACCESSOR,
@@ -7969,8 +8239,9 @@
                             useExisting: i0.forwardRef(function () { return MatChipsField; })
                         }
                     ],
+                    encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.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 = function () { return [
@@ -7978,7 +8249,7 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatChipsField.propDecorators = {
-        compareWith: [{ type: i0.Input }],
+        equals: [{ type: i0.Input }],
         logPrefix: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
@@ -7997,16 +8268,27 @@
         highlightAccent: [{ type: i0.Input }],
         showAllOnFocus: [{ type: i0.Input }],
         showPanelOnFocus: [{ type: i0.Input }],
-        appAutofocus: [{ type: i0.Input }],
+        autofocus: [{ type: i0.Input }],
         config: [{ type: i0.Input }],
         i18nPrefix: [{ type: i0.Input }],
         noResultMessage: [{ type: i0.Input }],
-        class: [{ type: i0.Input }],
+        classList: [{ type: i0.Input, args: ['class',] }],
+        panelWidth: [{ type: i0.Input }],
+        matAutocompletePosition: [{ type: i0.Input }],
         debug: [{ type: i0.Input }],
+        itemSize: [{ type: i0.Input }],
+        fetchMoreThreshold: [{ type: i0.Input }],
+        suggestLengthThreshold: [{ type: i0.Input }],
+        showLoadingSpinner: [{ type: i0.Input }],
+        chipColor: [{ type: i0.Input }],
         clicked: [{ type: i0.Output }],
         blurred: [{ type: i0.Output }],
         focused: [{ type: i0.Output }],
+        dropButtonClick: [{ type: i0.Output }],
+        keydownEscape: [{ type: i0.Output, args: ['keydown.escape',] }],
+        keyupEnter: [{ type: i0.Output, args: ['keyup.enter',] }],
         matInputText: [{ type: i0.ViewChild, args: ['matInputText',] }],
+        autocomplete: [{ type: i0.ViewChild, args: [autocomplete.MatAutocomplete,] }],
         autocompleteTrigger: [{ type: i0.ViewChild, args: [autocomplete.MatAutocompleteTrigger,] }],
         filter: [{ type: i0.Input }],
         tabindex: [{ type: i0.Input }],
@@ -18821,7 +19103,7 @@
     AutocompleteTestPage.decorators = [
         { type: i0.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 = function () { return [
@@ -18992,7 +19274,7 @@
     SwipeTestPage.decorators = [
         { type: i0.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 = function () { return [
@@ -19109,7 +19391,11 @@
     var 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(function (entity) { return Object.assign({}, entity); });
@@ -19133,13 +19419,15 @@
             this.autocompleteFields.add('entity-suggestFn', {
                 suggestFn: function (value, filter) { return _this.suggest(value, filter); },
                 attributes: ['label', 'name'],
-                displayWith: this.entityToString
+                displayWith: this.entityToString,
+                equals: function (o1, o2) { return 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: function (o1, o2) { return EntityUtils.compare(o1, o2, 1, 'id') === 0; }
             });
             // From items
             this.autocompleteFields.add('entity-$items', {
@@ -19189,7 +19477,7 @@
         ChipsTestPage.prototype.doSubmit = function (event) {
             console.debug('Validate form: ', this.form.value);
         };
-        ChipsTestPage.prototype.compareWithFn = function (o1, o2) {
+        ChipsTestPage.prototype.equals = function (o1, o2) {
             return o1 && o2 && o1.id === o2.id;
         };
         /* -- protected methods -- */
@@ -19201,7 +19489,7 @@
     ChipsTestPage.decorators = [
         { type: i0.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 = function () { return [
@@ -19835,12 +20123,23 @@
     };
 
     var AuthModal = /** @class */ (function () {
-        function AuthModal(accountService, viewCtrl, changeDetectorRef) {
+        function AuthModal(accountService, viewCtrl, cd) {
             this.accountService = accountService;
             this.viewCtrl = viewCtrl;
-            this.changeDetectorRef = changeDetectorRef;
-            this.loading = false;
+            this.cd = cd;
         }
+        Object.defineProperty(AuthModal.prototype, "loading", {
+            get: function () {
+                var _a;
+                return (_a = this.form) === null || _a === void 0 ? void 0 : _a.loading;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AuthModal.prototype.ngOnInit = function () {
+            this.form.markAsReady({ emitEvent: false });
+            this.form.markAsLoaded();
+        };
         AuthModal.prototype.cancel = function () {
             this.viewCtrl.dismiss();
         };
@@ -19848,31 +20147,30 @@
             return __awaiter(this, void 0, void 0, function () {
                 var data, account, err_1;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (this.form.disabled)
                                 return [2 /*return*/];
                             if (!this.form.valid) {
-                                this.form.markAsTouched();
+                                this.form.markAllAsTouched();
                                 return [2 /*return*/];
                             }
-                            this.loading = true;
-                            _a.label = 1;
+                            this.markAsLoading();
+                            _b.label = 1;
                         case 1:
-                            _a.trys.push([1, 3, , 4]);
+                            _b.trys.push([1, 3, , 4]);
                             data = this.form.value;
                             // Disable the form
                             this.form.disable();
                             return [4 /*yield*/, this.accountService.login(data)];
                         case 2:
-                            account = _a.sent();
+                            account = _b.sent();
                             return [2 /*return*/, this.viewCtrl.dismiss(account)];
                         case 3:
-                            err_1 = _a.sent();
-                            this.loading = false;
+                            err_1 = _b.sent();
                             this.form.error = err_1 && err_1.message || err_1;
-                            this.markForCheck();
+                            this.markAsLoaded();
                             // Enable the form
                             this.form.enable();
                             // Reset form error on next changes
@@ -19887,7 +20185,13 @@
             });
         };
         AuthModal.prototype.markForCheck = function () {
-            this.changeDetectorRef.markForCheck();
+            this.cd.markForCheck();
+        };
+        AuthModal.prototype.markAsLoading = function (opts) {
+            this.form.markAsLoading(opts);
+        };
+        AuthModal.prototype.markAsLoaded = function (opts) {
+            this.form.markAsLoaded(opts);
         };
         return AuthModal;
     }());
@@ -23673,6 +23977,7 @@
             _this._useValidator = false;
             _this._stopWatching$ = new rxjs.Subject();
             _this._editingRowCount = 0;
+            _this._fetchMoreFn = null;
             _this.loadingSubject = new rxjs.BehaviorSubject(undefined);
             _this._options = Object.assign({ dataServiceOptions: {}, debug: config && config.suppressErrors === false, keepOriginalDataAfterConfirm: false }, config);
             _this._useValidator = isNotNil(validatorService);
@@ -23723,6 +24028,7 @@
             var _this = this;
             this._stopWatching$.next();
             this._editingRowCount = 0;
+            this._fetchMoreFn = null;
             this.markAsLoading();
             return this.dataService.watchAll(offset, size, sortBy, sortDirection, filter, this.serviceOptions)
                 .pipe(
@@ -23736,6 +24042,7 @@
                 }
                 else {
                     _this.updateDatasource((res.data || []));
+                    _this._fetchMoreFn = res.fetchMore;
                 }
                 return res;
             }));
@@ -23986,6 +24293,53 @@
                 });
             });
         };
+        EntitiesTableDataSource.prototype.getData = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var rows;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.getRows()];
+                        case 1:
+                            rows = _a.sent();
+                            return [2 /*return*/, this.getDataFromRows(rows)];
+                    }
+                });
+            });
+        };
+        EntitiesTableDataSource.prototype.fetchMore = function (opts) {
+            var _super = Object.create(null, {
+                updateDatasource: { get: function () { return _super_1.prototype.updateDatasource; } }
+            });
+            return __awaiter(this, void 0, void 0, function () {
+                var res, existingData;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this._fetchMoreFn)
+                                return [2 /*return*/, false]; // Avoid multiple call
+                            if (this._editingRowCount > 0) {
+                                console.warn('Cannot fetch more because still editing row');
+                                return [2 /*return*/];
+                            }
+                            // Fetch next page
+                            this._fetchMoreFn = null; // Avoid multiple call
+                            return [4 /*yield*/, this._fetchMoreFn()];
+                        case 1:
+                            res = _a.sent();
+                            // Skip if empty (no more data)
+                            if (isNotEmptyArray(res === null || res === void 0 ? void 0 : res.data))
+                                return [2 /*return*/, false];
+                            return [4 /*yield*/, this.getData()];
+                        case 2:
+                            existingData = _a.sent();
+                            _super.updateDatasource.call(this, existingData.concat.apply(existingData, __spread(res.data)), opts);
+                            // Remember fetchMore
+                            this._fetchMoreFn = res.fetchMore;
+                            return [2 /*return*/, true];
+                    }
+                });
+            });
+        };
         /* -- protected method -- */
         EntitiesTableDataSource.prototype.markAsLoading = function () {
             if (this.loadingSubject.value !== true) {