@sumaris-net/ngx-components 1.6.4 → 1.6.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Input, Output, ViewChild, HostBinding, Pipe, Injectable, Directive, Inject, NgModule, ElementRef, ViewChildren, HostListener, ComponentFactoryResolver, ApplicationRef, Injector, Renderer2, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Input, Output, ViewChild, Pipe, Injectable, Directive, Inject, NgModule, ElementRef, ViewChildren, HostListener, ComponentFactoryResolver, ApplicationRef, Injector, Renderer2, ViewEncapsulation } from '@angular/core';
 import * as i1$3 from '@angular/common';
 import { CommonModule, DOCUMENT, Location } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -36,7 +36,7 @@ import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUT
 import { __awaiter, __decorate } from 'tslib';
 import * as i1$6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormGroupDirective, AbstractControl, FormGroup, FormArray, FormControl, ReactiveFormsModule, Validators, FormBuilder } from '@angular/forms';
-import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, noop as noop$8, Observable, defer, of, from, combineLatest, EMPTY } from 'rxjs';
+import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, noop as noop$9, Observable, defer, of, from, combineLatest, EMPTY } from 'rxjs';
 import { filter, first, map, takeUntil, switchMap, startWith, debounceTime, takeWhile, tap, distinctUntilChanged, mergeMap, catchError, throttleTime, skip } from 'rxjs/operators';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -976,10 +976,11 @@ class MatAutocompleteConfigHolder {
         const attributesOrFn = attributes.map((a, index) => typeof a === 'function' && options.attributes[index] || a);
         const filter = Object.assign({ searchAttribute: attributes.length === 1 ? attributes[0] : undefined, searchAttributes: attributes.length > 1 ? attributes : undefined }, options.filter);
         const displayWith = options.displayWith || ((obj) => obj && joinPropertiesPath(obj, attributes));
-        const compareWith = options.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
+        const equals = options.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
         const config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn,
             filter,
-            displayWith, equals: compareWith });
+            displayWith,
+            equals });
         this.fields[fieldName] = config;
         return config;
     }
@@ -990,14 +991,14 @@ class MatAutocompleteConfigHolder {
         return this.fields[fieldName] || this.add(fieldName);
     }
 }
-const noop$7 = () => { };
-const ɵ0$a = noop$7;
+const noop$8 = (_) => { };
+const ɵ0$b = noop$8;
 class MatAutocompleteField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$7;
-        this._onTouchedCallback = noop$7;
+        this._onChangeCallback = noop$8;
+        this._onTouchedCallback = noop$8;
         this.logPrefix = '[mat-autocomplete] ';
         this.formControlName = null;
         this.required = false;
@@ -1010,13 +1011,13 @@ class MatAutocompleteField {
         this.fetchMoreThreshold = '15%';
         this.suggestLengthThreshold = null;
         this.showLoadingSpinner = true;
+        this.debug = false;
         this.clicked = new EventEmitter();
         this.blurred = new EventEmitter();
         this.focused = new EventEmitter();
         this.dropButtonClick = new EventEmitter(true);
         this.keydownEscape = new EventEmitter();
         this.keyupEnter = new EventEmitter();
-        this.animationsDisabled = true;
         this._readonly = false;
         this.$inputItems = new BehaviorSubject(undefined);
         this.$filteredItems = new BehaviorSubject(undefined);
@@ -1087,6 +1088,9 @@ class MatAutocompleteField {
     get enabled() {
         return !this._readonly && this.formControl.enabled;
     }
+    get loading() {
+        return isNil(this.$filteredItems.value);
+    }
     ngOnInit() {
         var _a, _b;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
@@ -1107,7 +1111,7 @@ class MatAutocompleteField {
             this.mobile = toBoolean(this.mobile, this.config.mobile);
             this.suggestLengthThreshold = toNumber(this.suggestLengthThreshold, this.config.suggestLengthThreshold || 0);
             this.showAllOnFocus = toBoolean(this.showAllOnFocus, toBoolean(this.config.showAllOnFocus, this.suggestLengthThreshold <= 0));
-            this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus));
+            this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus, true));
             this.classList = this.classList || this.config.class;
             this.debounceTime = toNumber(this.debounceTime, this.config.debounceTime);
             this.highlightAccent = toBoolean(this.highlightAccent, toBoolean(this.config.highlightAccent));
@@ -1185,15 +1189,15 @@ class MatAutocompleteField {
         // Filter if not enough character
         filter(value => value.length >= this.suggestLengthThreshold), 
         // Wait a debounce time
-        debounceTime(this.debounceTime)
+        debounceTime(this.debounceTime), 
         // DEBUG
-        //tap((value) => console.debug(this.logPrefix + ' Search text changes:', value)),
-        ), 
+        tap((value) => console.debug(this.logPrefix + ' Search text changes:', value))), 
         // Object set: use it (no distinctUntilChanged() pipe need)
         this.formControl.valueChanges
             .pipe(startWith(this.formControl.value), filter(value => (this.searchable && isNotNil(value) && typeof value === 'object')), tap(value => {
             // DEBUG
-            //console.debug(this.logPrefix + ' object changes:', value)
+            if (this.debug)
+                console.debug(this.logPrefix + ' object changes:', value);
             // Update the display value (if need)
             const displayValue = this.displayWith(value) || '';
             if (this.displayValue !== displayValue) {
@@ -1203,10 +1207,9 @@ class MatAutocompleteField {
                     this.matInputText.nativeElement.value = this.displayValue;
                 }
             }
-        })
+        }), 
         // DEBUG
-        //tap(value => console.debug(this.logPrefix + ' Received an object value: ', value))
-        ), 
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received an object value: ', value))), 
         // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
         this.dropButtonClick
             .pipe(filter(event => this.searchable && this.enabled && (!event || !event.defaultPrevented)), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
@@ -1216,20 +1219,23 @@ class MatAutocompleteField {
         merge(
         // Focus or click => Load all
         merge(this.focused, this.clicked)
-            .pipe(filter(_ => this.enabled && this.searchable), map(_ => this.showAllOnFocus ? '*' : this.formControl.value)), merge(this.$inputItems, this._$filter)
-            .pipe(filter(_ => this.searchable && this.enabled), map(_ => this.formControl.value)))
+            .pipe(filter(_ => this.enabled && this.searchable), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
+        // DEBUG
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event: ', value))), merge(this.$inputItems, this._$filter)
+            .pipe(filter(_ => this.searchable && this.enabled), map(_ => this.formControl.value), 
+        // DEBUG
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received $inputItems or filter event: ', value))))
             .pipe(
-        // Make enough characters
+        // Make sure there is enough characters
         filter(thresholdFilterFn), 
         // Distinguish changes
-        distinctUntilChanged(), 
-        // DEBUG
-        tap(value => console.debug(this.logPrefix + ' Received update event: ', value))))
+        // - do NOT filter if loading, to force update after a blur event
+        distinctUntilChanged((v1, v2) => !this.loading && (v1 === v2 || this.equals(v1, v2)))))
             .pipe(
         // Suggest values
         mergeMap(value => this.suggest(value, this.filter)), 
         // DEBUG
-        //tap(items => console.debug(this.logPrefix + ' Received from suggest: ', items)),
+        tap(items => this.debug && console.debug(this.logPrefix + ' Received from suggest: ', items)), 
         // Store implicit value (will use it onBlur if not other value selected)
         tap(items => this.updateImplicitValue(items)));
         // Fetch more events
@@ -1262,7 +1268,9 @@ class MatAutocompleteField {
         this._subscription.add(this.blurred
             .pipe(
         // Skip if not searchable
-        filter(_ => this.searchable), map(_ => this.formControl.value))
+        filter(_ => this.searchable), map(_ => this.formControl.value), 
+        // DEBUG
+        tap(value => console.debug(this.logPrefix + ' Received blurred event: ', value)))
             .subscribe(value => {
             // When leave component without object, use implicit value if :
             // - an explicit value
@@ -1348,7 +1356,7 @@ class MatAutocompleteField {
     }
     writeValue(value) {
         // DEBUG
-        // console.debug(this.logPrefix + " Writing value: ", value);
+        // console.debug(this.logPrefix + ' Writing value: ', value);
         if (value !== this.formControl.value) {
             this.formControl.patchValue(value, { emitEvent: false });
             this._onChangeCallback(value);
@@ -1385,15 +1393,20 @@ class MatAutocompleteField {
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
-            //DEBUG console.debug(this.logPrefix + ' Cancelling focus event');
+            // DEBUG
+            if (this.debug)
+                console.debug(this.logPrefix + ' Cancelling focus event');
             return false;
         }
-        const hasContent = selectInputContent(event);
+        if (this.debug)
+            console.debug(this.logPrefix + ' Select input content');
+        const hasContent = true; // selectInputContent(event);
         // If combo is empty, or if has content but should force to show panel on focus
-        if (!hasContent || (this.showPanelOnFocus && this.showAllOnFocus)) {
+        if (!hasContent || this.showPanelOnFocus || this.showAllOnFocus) {
             // DEBUG
-            //console.debug(this.logPrefix + ' Emit focus event');
-            this.focused.emit(event);
+            if (this.debug)
+                console.debug(this.logPrefix + ' Emit focus event');
+            this.focused.emit();
             return true;
         }
         return false;
@@ -1407,11 +1420,14 @@ class MatAutocompleteField {
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
-            //DEBUG console.debug(this.logPrefix + " Cancelling blur event");
+            // DEBUG
+            if (this.debug)
+                console.debug(this.logPrefix + " Cancelling blur event");
             return false;
         }
         //DEBUG
-        //console.debug(this.logPrefix + ' Blur: move caret to the beginning');
+        if (this.debug)
+            console.debug(this.logPrefix + ' Blur: move caret to the beginning');
         // Move caret to the beginning (fix issue IMAGINE-469)
         selectInputRange(event.target, 0, 0);
         this.blurred.emit(event);
@@ -1522,6 +1538,7 @@ class MatAutocompleteField {
     /* -- private method -- */
     suggest(value, filter) {
         return __awaiter(this, void 0, void 0, function* () {
+            // Call suggestion function
             let res = yield this.suggestFn(value, filter);
             // DEBUG
             //console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
@@ -1542,6 +1559,9 @@ class MatAutocompleteField {
                 this._moreItemsCount = fetchMore && (this._itemCount - data.length) || 0;
                 res = data;
             }
+            // DEBUG
+            if (this.debug)
+                console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
             return res;
         });
     }
@@ -1613,7 +1633,7 @@ MatAutocompleteField.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'mat-autocomplete-field',
-                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <!-- readonly -->\n        <ng-container>\n          <input matInput hidden type=\"text\"\n                 [placeholder]=\"placeholder\"\n                 [formControl]=\"formControl\" readonly>\n          <ion-text>{{displayWith(value)}}</ion-text>\n        </ng-container>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"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",
+                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                              [panelWidth]=\"panelWidth\">\n\n              <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  <ion-text color=\"light\" *ngIf=\"last && itemCount; let count\" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n              <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"searchable\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n          *ngIf=\"enabled && mobile && !searchable && !multiple\"\n          [title]=\"'COMMON.BTN_SEARCH'|translate\"\n          (click)=\"toggleSearch($event)\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         multi: true,
@@ -1658,6 +1678,7 @@ MatAutocompleteField.propDecorators = {
     fetchMoreThreshold: [{ type: Input }],
     suggestLengthThreshold: [{ type: Input }],
     showLoadingSpinner: [{ type: Input }],
+    debug: [{ type: Input }],
     clicked: [{ type: Output, args: ['click',] }],
     blurred: [{ type: Output, args: ['blur',] }],
     focused: [{ type: Output, args: ['focus',] }],
@@ -1668,7 +1689,6 @@ MatAutocompleteField.propDecorators = {
     matInputText: [{ type: ViewChild, args: ['matInputText',] }],
     autocomplete: [{ type: ViewChild, args: [MatAutocomplete,] }],
     autocompleteTrigger: [{ type: ViewChild, args: [MatAutocompleteTrigger,] }],
-    animationsDisabled: [{ type: HostBinding, args: ['@.disabled',] }],
     filter: [{ type: Input }],
     readonly: [{ type: Input }],
     tabindex: [{ type: Input }],
@@ -4086,9 +4106,9 @@ const MASKS = {
         DD: [/[+-]/, /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, '°']
     }
 };
-const noop$6 = () => {
+const noop$7 = () => {
 };
-const ɵ0$9 = noop$6;
+const ɵ0$a = noop$7;
 class MatLatLongField {
     constructor(platform, translate, formBuilder, cd, formGroupDir) {
         this.platform = platform;
@@ -4096,8 +4116,8 @@ class MatLatLongField {
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$6;
-        this._onTouchedCallback = noop$6;
+        this._onChangeCallback = noop$7;
+        this._onTouchedCallback = noop$7;
         this._subscription = new Subscription();
         this.disabling = false;
         this.writing = false;
@@ -4439,8 +4459,8 @@ const DEFAULT_VALUE_ACCESSOR$5 = {
     multi: true
 };
 const DAY_MASK$2 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
-const noop$5 = () => { };
-const ɵ0$8 = noop$5;
+const noop$6 = () => { };
+const ɵ0$9 = noop$6;
 class MatDate {
     constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
         this.dateAdapter = dateAdapter;
@@ -4449,8 +4469,8 @@ class MatDate {
         this.cd = cd;
         this.keyboard = keyboard;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$5;
-        this._onTouchedCallback = noop$5;
+        this._onChangeCallback = noop$6;
+        this._onTouchedCallback = noop$6;
         this._subscription = new Subscription();
         this.writing = true;
         this.disabling = false;
@@ -4732,9 +4752,9 @@ const DEFAULT_VALUE_ACCESSOR$4 = {
 const DAY_MASK$1 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
 const HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
 const HOUR_MASK$1 = [/[012]/, /\d/, ':', /[012345]/, /\d/];
-const noop$4 = () => {
+const noop$5 = () => {
 };
-const ɵ0$7 = noop$4;
+const ɵ0$8 = noop$5;
 class MatDateTime {
     constructor(platform, dateAdapter, translate, formBuilder, keyboard, cd, formGroupDir) {
         this.platform = platform;
@@ -4744,8 +4764,8 @@ class MatDateTime {
         this.keyboard = keyboard;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$4;
-        this._onTouchedCallback = noop$4;
+        this._onChangeCallback = noop$5;
+        this._onTouchedCallback = noop$5;
         this._subscription = new Subscription();
         this.writing = true;
         this.disabling = false;
@@ -5103,9 +5123,9 @@ const DEFAULT_VALUE_ACCESSOR$3 = {
     multi: true
 };
 const DAY_MASK = [/\d/, /\d/, /\d/, /\d/];
-const noop$3 = () => {
+const noop$4 = () => {
 };
-const ɵ0$6 = noop$3;
+const ɵ0$7 = noop$4;
 class MatDateShort {
     constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
         this.dateAdapter = dateAdapter;
@@ -5114,8 +5134,8 @@ class MatDateShort {
         this.cd = cd;
         this.keyboard = keyboard;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$3;
-        this._onTouchedCallback = noop$3;
+        this._onChangeCallback = noop$4;
+        this._onTouchedCallback = noop$4;
         this.writing = true;
         this.disabling = false;
         this.dayMask = DAY_MASK;
@@ -5438,9 +5458,9 @@ const DEFAULT_VALUE_ACCESSOR$2 = {
 };
 const HOUR_TIME_PATTERN = /[0-9]\d\d:[0-5]\d/;
 const HOUR_MASK = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
-const noop$2 = () => {
+const noop$3 = () => {
 };
-const ɵ0$5 = noop$2;
+const ɵ0$6 = noop$3;
 class MatDuration {
     constructor(platform, dateAdapter, translate, formBuilder, cd, formGroupDir) {
         this.dateAdapter = dateAdapter;
@@ -5449,8 +5469,8 @@ class MatDuration {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
         this._subscription = new Subscription();
-        this._onChangeCallback = noop$2;
-        this._onTouchedCallback = noop$2;
+        this._onChangeCallback = noop$3;
+        this._onTouchedCallback = noop$3;
         this.writing = true;
         this.disabling = false;
         this.hourMask = HOUR_MASK;
@@ -5695,17 +5715,17 @@ const DEFAULT_VALUE_ACCESSOR$1 = {
     useExisting: forwardRef(() => MatBooleanField),
     multi: true
 };
-const noop$1 = () => {
+const noop$2 = () => {
 };
-const ɵ0$4 = noop$1;
+const ɵ0$5 = noop$2;
 class MatBooleanField {
     constructor(translate, formBuilder, cd, formGroupDir) {
         this.translate = translate;
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$1;
-        this._onTouchedCallback = noop$1;
+        this._onChangeCallback = noop$2;
+        this._onTouchedCallback = noop$2;
         this._writing = false;
         this.showRadio = false;
         this.disabled = false;
@@ -6488,8 +6508,8 @@ class MatSwipeField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$8;
-        this._onTouchedCallback = noop$8;
+        this._onChangeCallback = noop$9;
+        this._onTouchedCallback = noop$9;
         this._subscription = new Subscription();
         this._writing = false;
         this.showSlides = false;
@@ -6800,12 +6820,14 @@ SharedMatSwipeModule.decorators = [
             },] }
 ];
 
+const noop$1 = () => { };
+const ɵ0$4 = noop$1;
 class MatChipsField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = (_) => { };
-        this._onTouchedCallback = () => { };
+        this._onChangeCallback = noop$1;
+        this._onTouchedCallback = noop$1;
         this.logPrefix = '[mat-chips] ';
         this.formControlName = null;
         this.required = false;
@@ -6814,12 +6836,12 @@ class MatChipsField {
         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.debug = false;
         this.clicked = new EventEmitter();
         this.blurred = new EventEmitter();
         this.focused = new EventEmitter();
@@ -6888,6 +6910,9 @@ class MatChipsField {
     get enabled() {
         return !this.readonly && this.formControl.enabled;
     }
+    get loading() {
+        return isNil(this.$filteredItems.value);
+    }
     ngOnInit() {
         var _a, _b;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
@@ -6983,19 +7008,9 @@ class MatChipsField {
         ), 
         // Object set: use it (no distinctUntilChanged() pipe need)
         this.inputControl.valueChanges
-            .pipe(startWith(this.inputControl.value), filter(value => isNotNil(value) && typeof value === 'object'), tap(value => {
-            // DEBUG
-            //console.debug(this.logPrefix + ' object changes:', value)
-            // Update the display value (if need)
-            const displayValue = this.displayWith(value) || '';
-            // Apply to the input[type=text] field
-            if (this.matInputText && this.matInputText.nativeElement) {
-                this.matInputText.nativeElement.value = displayValue;
-            }
-        })
+            .pipe(startWith(this.inputControl.value), filter(value => isNotNil(value) && typeof value === 'object'), 
         // DEBUG
-        //tap(value => console.debug(this.logPrefix + ' Received an object value: ', value))
-        ), 
+        tap(value => this.debug && console.debug(this.logPrefix + ' Received an object value: ', value))), 
         // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
         this.dropButtonClick
             .pipe(filter(event => this.enabled && (!event || !event.defaultPrevented)), tap(_ => this.matInputText.nativeElement.focus()), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
@@ -7085,7 +7100,9 @@ class MatChipsField {
             this._openedSubscription.unsubscribe();
         }
         this.$inputItems.complete();
+        this.$inputItems.unsubscribe();
         this.$filteredItems.complete();
+        this.$filteredItems.unsubscribe();
         this._reload$.complete();
         this._$filter.complete();
         this.dropButtonClick.complete();
@@ -7147,12 +7164,18 @@ class MatChipsField {
         this._reload$.next(value || '*');
     }
     writeValue(value) {
-        if (this.debug)
-            console.debug(this.logPrefix + ' Writing value: ', value);
+        if (value && !Array.isArray(value)) {
+            value = [value];
+        }
         if (value !== this.formControl.value) {
+            if (this.debug)
+                console.debug(this.logPrefix + ' Writing value: ', value);
             this.formControl.patchValue(value, { emitEvent: false });
             this._onChangeCallback(value);
         }
+        else {
+            this.markForCheck();
+        }
     }
     registerOnChange(fn) {
         this._onChangeCallback = fn;
@@ -7261,7 +7284,7 @@ class MatChipsField {
             // Call suggestion function
             let res = yield this.suggestFn(value, filter);
             // DEBUG
-            // console.debug(this.logPrefix + " Filtered items by suggestFn:", value, res);
+            //console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
             if (!res) {
                 this._itemCount = 0;
                 res = [];
@@ -7271,14 +7294,17 @@ class MatChipsField {
                 this._itemCount = res.length || 0;
             }
             else {
-                const { data, total } = res;
-                res = data;
+                const { data, total, fetchMore } = res;
                 this._itemCount = toNumber(total, data && data.length || 0);
+                this._onFetchMoreCallback = fetchMore;
+                this._moreItemsCount = fetchMore && (this._itemCount - data.length) || 0;
+                res = data;
             }
             // Filter out existing items
             const filteredData = (res || []).slice().filter(item1 => this.value.findIndex(item2 => this.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));
+            const removedItemCount = (((res === null || res === void 0 ? void 0 : res.length) || 0) - ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) || 0));
+            // Decrease the item count, with delta
+            this._itemCount -= removedItemCount;
             if (this.debug)
                 console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
             return res;
@@ -7308,6 +7334,12 @@ class MatChipsField {
             this._implicitValue = undefined;
         }
     }
+    checkIfTouched() {
+        if (this.formControl.touched) {
+            this.cd.markForCheck();
+            this._onTouchedCallback();
+        }
+    }
     getAutocompletePanel() {
         var _a, _b;
         const ele = (_b = (_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.options.last) === null || _b === void 0 ? void 0 : _b._getHostElement().parentElement;
@@ -7317,12 +7349,6 @@ class MatChipsField {
         }
         return ele;
     }
-    checkIfTouched() {
-        if (this.formControl.touched) {
-            this.cd.markForCheck();
-            this._onTouchedCallback();
-        }
-    }
     markForCheck() {
         this.cd.markForCheck();
     }
@@ -7342,13 +7368,11 @@ MatChipsField.decorators = [
                 // 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-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: [
-                    {
+                providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         multi: true,
                         useExisting: forwardRef(() => MatChipsField)
-                    }
-                ],
+                    }],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 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)}"]
@@ -7385,12 +7409,12 @@ MatChipsField.propDecorators = {
     classList: [{ type: Input, args: ['class',] }],
     panelWidth: [{ type: Input }],
     matAutocompletePosition: [{ type: Input }],
-    debug: [{ type: Input }],
     itemSize: [{ type: Input }],
     fetchMoreThreshold: [{ type: Input }],
     suggestLengthThreshold: [{ type: Input }],
     showLoadingSpinner: [{ type: Input }],
     chipColor: [{ type: Input }],
+    debug: [{ type: Input }],
     clicked: [{ type: Output }],
     blurred: [{ type: Output }],
     focused: [{ type: Output }],
@@ -16512,7 +16536,7 @@ class AutocompleteTestPage {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
         this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
-        this.$items = new BehaviorSubject(undefined);
+        this._$items = new BehaviorSubject(undefined);
         this.autocompleteFields = new MatAutocompleteConfigHolder();
         this.memoryHide = false;
         this.memoryMobile = true;
@@ -16541,7 +16565,7 @@ class AutocompleteTestPage {
         });
         // From $items observable
         this.autocompleteFields.add('entity-$items', {
-            items: this.$items,
+            items: this._$items,
             attributes: ['label', 'name'],
             displayWith: this.entityToString
         });
@@ -16579,7 +16603,7 @@ class AutocompleteTestPage {
     }
     loadItems() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.$items.next(this._items.slice());
+            this._$items.next(this._items.slice());
         });
     }
     entityToString(item) {
@@ -16609,7 +16633,7 @@ class AutocompleteTestPage {
     doSubmit(event) {
         console.debug('Validate form: ', this.form.value);
     }
-    compareWithFn(o1, o2) {
+    equals(o1, o2) {
         return o1 && o2 && o1.id === o2.id;
     }
     toggleMode(value) {
@@ -16640,7 +16664,7 @@ class AutocompleteTestPage {
 AutocompleteTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-autocomplete-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [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"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter('entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n      <ion-col size=\"6\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-text color=\"primary\">\n                Readonly toggle\n              </ion-text>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid>\n              <ion-row>\n                <ion-col size=\"3\">\n                  <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                    Readonly ?\n                  </mat-checkbox>\n                </ion-col>\n              </ion-row>\n              <ion-row>\n                <ion-col>\n                  <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                          [config]=\"autocompleteFields.get('entity-items')\"\n                                          [placeholder]=\"'Entity'\"\n                                          [mobile]=\"true\"\n                                          [equals]=\"equals\"\n                                          [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                          [readonly]=\"true\"\n                                          [clearable]=\"!readonlyField.readonly\">\n                  </mat-autocomplete-field>\n                </ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -16907,13 +16931,24 @@ const FAKE_ENTITIES = [
     { id: 6, label: 'FFF', name: 'Item F' },
     { id: 7, label: 'GGG', name: 'Item G' }
 ];
-function deepCopy(values) {
-    return (values || FAKE_ENTITIES).map(entity => Object.assign({}, entity));
+function deepCopy(values, size) {
+    if (isNil(size)) {
+        return (values || FAKE_ENTITIES).map(entity => Object.assign({}, entity));
+    }
+    let result = [];
+    let i = 1;
+    while (result.length < size) {
+        result = result.concat((values || FAKE_ENTITIES).map(entity => {
+            const name = entity.name + ' #' + i;
+            return Object.assign(Object.assign({}, entity), { id: i++, name });
+        }));
+    }
+    return result.slice(0, size);
 }
 class ChipsTestPage {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this._items = deepCopy(FAKE_ENTITIES);
+        this._items = deepCopy(FAKE_ENTITIES, 100);
         this._$items = new BehaviorSubject(undefined);
         this.autocompleteFields = new MatAutocompleteConfigHolder();
         this.form = formBuilder.group({
@@ -16933,12 +16968,12 @@ class ChipsTestPage {
         });
         // From items
         this.autocompleteFields.add('entity-items', {
-            items: FAKE_ENTITIES.slice(),
+            items: this._items.slice(),
             attributes: ['label', 'name'],
             displayWith: this.entityToString,
             equals: (o1, o2) => EntityUtils.compare(o1, o2, 1, 'id') === 0
         });
-        // From items
+        // From $items observable
         this.autocompleteFields.add('entity-$items', {
             items: this._$items,
             attributes: ['label', 'name'],
@@ -16952,18 +16987,20 @@ class ChipsTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
+            const items = deepCopy(FAKE_ENTITIES);
             const data = {
-                entity: [],
-                // THis item is NOT in the items list => i should be displayed anyway
-                entityInitial: FAKE_ENTITIES.slice(1, 2),
-                disableEntity: FAKE_ENTITIES.slice(1, 2)
+                entity: items.slice(0, 1),
+                entityInitial: items.slice(1, 2),
+                disableEntity: items.slice(1, 2)
             };
             this.form.setValue(data);
+            // Load observables
+            setTimeout(() => this.loadItems(), 1000);
         });
     }
     loadItems() {
         return __awaiter(this, void 0, void 0, function* () {
-            this._$items.next(deepCopy(FAKE_ENTITIES));
+            this._$items.next(this._items.slice());
         });
     }
     entityToString(item) {
@@ -16971,7 +17008,23 @@ class ChipsTestPage {
     }
     suggest(value, filter) {
         return __awaiter(this, void 0, void 0, function* () {
-            return suggestFromArray(this._items, value, Object.assign(Object.assign({}, filter), { searchAttributes: ['label', 'name'] }));
+            filter = Object.assign({ offset: 0, size: 30 }, filter);
+            const res = suggestFromArray(this._items, value, Object.assign(Object.assign({}, filter), { searchAttributes: ['label', 'name'] }));
+            // Simulate a size = 30
+            const total = res.total || res.data.length;
+            const nextOffset = filter.offset + res.data.length;
+            if (nextOffset < total) {
+                filter = Object.assign(Object.assign({}, filter), { offset: nextOffset });
+                return {
+                    total,
+                    data: res.data,
+                    fetchMore: (variables) => __awaiter(this, void 0, void 0, function* () {
+                        yield sleep(1000);
+                        return this.suggest(value, Object.assign(Object.assign({}, filter), variables));
+                    })
+                };
+            }
+            return res;
         });
     }
     doSubmit(event) {
@@ -16988,7 +17041,7 @@ class ChipsTestPage {
 ChipsTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-chips-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-empty] '\"\n                               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"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-empty] '\"\n                               chipColor=\"accent\"\n                               [debug]=\"false\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-initialized] '\"\n                               chipColor=\"primary\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [equals]=\"equals\"\n                               [logPrefix]=\"'[mat-chips-disabled] '\"\n                               chipColor=\"warning\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 ChipsTestPage.ctorParameters = () => [
@@ -24924,5 +24977,5 @@ const ErrorCodes = {
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0$5 as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, SharedMatBadgeIconModule as ɵc, MatBadgeIconDirective as ɵd, isFocusableElement as ɵe, MatBadgeIconTestPage as ɵf, RegisterForm as ɵg, AccountValidatorService as ɵh, RegisterModal as ɵi, UserSettingsValidatorService as ɵj, LocalSettingsValidatorService as ɵk, AppIconComponent as ɵl };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, SharedMatBadgeIconModule as ɵc, MatBadgeIconDirective as ɵd, isFocusableElement as ɵe, MatBadgeIconTestPage as ɵf, RegisterForm as ɵg, AccountValidatorService as ɵh, RegisterModal as ɵi, UserSettingsValidatorService as ɵj, LocalSettingsValidatorService as ɵk, AppIconComponent as ɵl };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map