@sumaris-net/ngx-components 18.6.18 → 18.6.19-alpha2

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -6258,7 +6258,7 @@ class MatBooleanField {
     }
     onBlurInput(event) {
         const internalEvent = this.inputsElements.some((el) => el === event.relatedTarget);
-        if (!internalEvent) {
+        if (!internalEvent && this._focused) {
             this._focused = false;
             this.updateFakeInput();
             this.updateTabIndex();
@@ -7750,6 +7750,7 @@ class MatAutocompleteField {
     _moreItemsCount;
     _fetchMore$ = new EventEmitter();
     _defaultPanelWidth = null;
+    _focused = false;
     equals;
     logPrefix = '[mat-autocomplete] ';
     formControl;
@@ -8156,10 +8157,9 @@ class MatAutocompleteField {
             }
             this._implicitValue = null; // reset the implicit value
             this.closePanel(); // Close panel
-            // Invalidate loaded items (mark as loading should force next focus to reload items)
+            // Invalidate loaded items
             if (invalidateFilteredItems) {
-                this._selectedItem = null;
-                this.markAsLoading();
+                this.markAsLoading(); // Should force next focus to reload items
             }
             // Move caret to the beginning (fix issue IMAGINE-469)
             if (moveCaretToBeginning) {
@@ -8186,16 +8186,20 @@ class MatAutocompleteField {
         // Select input content, on focus or press enter
         if (this.selectInputContentOnFocus && !this.mobile && !this.multiple) {
             this._subscription.add(merge(this.focused.pipe(filter((event) => !event.defaultPrevented), tap$1((event) => event.preventDefault())), this.keyupEnter.pipe(filter(() => isNotNilObject(this.formControl.value))))
-                .pipe(debounceTime(this.selectInputContentOnFocusDelay)
-            // TODO: filter Only if still focused - See sumaris issue on double panel opened
-            //filter()
-            )
+                .pipe(debounceTime(this.selectInputContentOnFocusDelay))
                 .subscribe(() => {
                 if (this.debug)
                     console.debug(this.logPrefix + ' Selecting input content (focused)');
                 selectInputContent(this.matInputText?.nativeElement);
             }));
         }
+        if (this.reloadItemsOnFocus) {
+            this._subscription.add(this.focused.pipe(filter((event) => !this.loading && !event.defaultPrevented)).subscribe(() => {
+                if (this.debug)
+                    console.debug(this.logPrefix + ' Reloading items (focused)');
+                this.reloadItems();
+            }));
+        }
     }
     ngAfterViewInit() {
         this._fixMatSelectPositionAndSearchbar();
@@ -8283,7 +8287,7 @@ class MatAutocompleteField {
         if (!event || event.defaultPrevented) {
             if (this.debug)
                 console.debug(this.logPrefix + 'calling filterInputTextFocusEvent - event.defaultPrevented');
-            return;
+            return false;
         }
         // Ignore event from mat-option
         if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.tagName === 'MAT-OPTION') {
@@ -8302,7 +8306,12 @@ class MatAutocompleteField {
         if (!hasContent || this.showPanelOnFocus || this.showAllOnFocus) {
             // DEBUG
             //if (this.debug) console.debug(this.logPrefix + ' Emit focus event');
-            this.focused.emit(event);
+            this._focused = true;
+            setTimeout(() => {
+                if (!this._focused)
+                    return; // Skip if blur event received
+                this.focused.emit(event);
+            }, 10);
             return true;
         }
         return false;
@@ -8324,10 +8333,10 @@ class MatAutocompleteField {
                 event.returnValue = false;
                 // DEBUG
                 //if (this.debug) console.debug(this.logPrefix + " Cancelling blur event");
-                return false;
+                return;
             }
+            this._focused = false;
             this.blurred.emit(event);
-            return true;
         }, 100);
     }
     ionSearchBarChanged(event) {
@@ -8378,7 +8387,10 @@ class MatAutocompleteField {
             // console.debug(this.logPrefix + " Cancelling <mat-select> blur event");
             return false;
         }
-        this.blurred.emit(event);
+        if (this._focused) {
+            this._focused = false;
+            this.blurred.emit(event);
+        }
         return true;
     }
     clearValue(event) {
@@ -8436,11 +8448,14 @@ class MatAutocompleteField {
     /* -- protected method -- */
     markAsLoading() {
         if (this._$filteredItems.value) {
+            if (this.debug)
+                console.debug(this.logPrefix + ' Marking as loading');
             this._$filteredItems.next(undefined);
             this._itemCount = undefined;
             this._implicitValue = undefined;
             this._onFetchMoreCallback = undefined;
             this._moreItemsCount = 0;
+            this._selectedItem = null;
             this.markForCheck();
         }
     }
@@ -43843,11 +43858,11 @@ class AutocompleteTestPage {
         return JSON.stringify(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\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-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\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\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <!-- Loading spinner -->\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\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              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\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              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far entity (in the list)\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Suggest() function</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Items is an Observable</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</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(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\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              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\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\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\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\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-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          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Suggest() function</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>showAllOnFocus=true, suggestFn: (searchText, 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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\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            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [class]=\"'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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\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        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"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          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\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  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\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-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\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\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <!-- Loading spinner -->\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\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              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\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              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far entity (in the list)\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Suggest() function</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Items is an Observable</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</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(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\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              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\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\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\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\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-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          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Suggest() function</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>showAllOnFocus=true, suggestFn: (searchText, 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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\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            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [class]=\"'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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\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        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"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          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\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  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\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-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\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\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <!-- Loading spinner -->\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\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              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\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              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far entity (in the list)\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Suggest() function</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Items is an Observable</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</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(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\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              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\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\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\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\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-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          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Suggest() function</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>showAllOnFocus=true, suggestFn: (searchText, 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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\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            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [class]=\"'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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\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        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"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          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\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  </form>\n</ion-content>\n" }]
+            args: [{ selector: 'app-autocomplete-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\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-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\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\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <!-- Loading spinner -->\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\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              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\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              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far entity (in the list)\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Suggest() function</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Items is an Observable</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\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</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(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\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              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\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\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\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\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-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          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Suggest() function</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>showAllOnFocus=true, suggestFn: (searchText, 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\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\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            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</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\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [class]=\"'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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\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        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"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          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</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\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        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                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\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  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { farEntityField: [{
                 type: ViewChild,
                 args: ['farEntityField']