@sumaris-net/ngx-components 18.12.0 → 18.12.1

package/src/app/shared/material/autocomplete/testing/autocomplete.test.html

@@ -1,1164 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Autocomplete field test page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- Tab nav - mobile/desktop mode -->
-  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-    <a mat-tab-link [active]="mode === 'mobile'" (click)="toggleMode('mobile')">
-      <mat-label>Mobile</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'desktop'" (click)="toggleMode('desktop')">
-      <mat-label>Desktop</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'memory'" (click)="toggleMode('memory')">
-      <mat-label>Memory leak debug</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'temp'" (click)="toggleMode('temp')">
-      <mat-label>Temporary</mat-label>
-    </a>
-  </nav>
-
-  <form #tabPanel class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
-    @if (mode === 'temp') {
-      <ion-grid>
-        <ion-row>
-          <!-- Autocomplete medium panel class - see issue sumaris-app#943
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Autocomplete with class 'min-width-medium'</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>
-                        class="min-width-medium"
-                      </pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  placeholder="With panel class"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  panelClass="min-width-medium"
-                  [mobile]="false"
-                  [logPrefix]="'[combo-temp-min-width-medium]'"
-                  [showAllOnFocus]="true"
-                  [debug]="true"
-                >
-                  <button matAfter type="button" mat-icon-button tabindex="-1" title="Filter" [color]="'primary'">
-                    <mat-icon>filter_list_alt</mat-icon>
-                  </button>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>-->
-
-          <!-- Autocomplete with button
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Autocomplete with button</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre style="white-space: normal !important">
-                        value: {{ stringify(form.controls.withButton.value) }}</pre
-                      >
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="withButton"
-                  placeholder="With button"
-                  [config]="autocompleteFields.get('entity-with-button')"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-temp-with-button]'"
-                  [required]="true"
-                  [clearable]="true"
-                  [clearInvalidValueOnBlur]="true"
-                  [reloadItemsOnFocus]="true"
-                  [showAllOnFocus]="true"
-                  [selectInputContentOnFocus]="true"
-                  [debug]="true"
-                >
-                  <button matAfter type="button" mat-icon-button tabindex="-1" title="Filter" [color]="'primary'">
-                    <mat-icon>filter_list_alt</mat-icon>
-                  </button>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col> -->
-
-          <!--<ion-col size="3">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">panelClass + suggestLengthThreshold</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>
-suggestLengthThreshold: '3'
-panelClass="mat-select-panel-fit-content"
-                      </pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="emptyEntity"
-                  [config]="autocompleteFields.get('entity-items-filter')"
-                  [placeholder]="'Entity'"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [suggestLengthThreshold]="3"
-                  [logPrefix]="'[combo-desktop-suggestLengthThreshold]'"
-                  [debug]="true"
-                  [showAllOnFocus]="true"
-                  panelClass="mat-select-panel-fit-content"
-                >
-                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>-->
-
-          <!-- showAllOnFocus + required + NO searchbar
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">showAllOnFocus + required + NO searchbar</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  #field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-suggestFn')"
-                  [placeholder]="'Entity'"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-no-searchbar]'"
-                  [debug]="true"
-                  [mobile]="true"
-                  [required]="true"
-                  placeholder="No search bar"
-                  showSearchBar="true"
-                  [showAllOnFocus]="false"
-                >
-                  <ion-spinner matSuffix *ngIf="field.loading"></ion-spinner>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>-->
-        </ion-row>
-      </ion-grid>
-    }
-
-    @if (mode === 'memory') {
-      <ion-grid>
-        <!-- debugging memory leak -->
-        <ion-row>
-          <ion-col>
-            <ion-text><h4>Debug memory leak</h4></ion-text>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col size="2">
-            <mat-form-field floatLabel="always">
-              <mat-label>Items type</mat-label>
-              <input matInput type="text" hidden />
-              <mat-select
-                (selectionChange)="memoryAutocompleteFieldName = $event.value"
-                [value]="memoryAutocompleteFieldName"
-              >
-                <mat-option value="entity-$items">Observable</mat-option>
-                <mat-option value="entity-suggestFn">Suggest function</mat-option>
-              </mat-select>
-            </mat-form-field>
-          </ion-col>
-          <ion-col size="1" class="ion-no-padding">
-            <mat-form-field floatLabel="always">
-              <mat-label>Mobile ?</mat-label>
-              <input matInput type="text" hidden />
-              <mat-checkbox (change)="memoryMobile = $event.checked" [checked]="memoryMobile"></mat-checkbox>
-            </mat-form-field>
-          </ion-col>
-          <ion-col size="2">
-            @if (!memoryTimer) {
-              <ion-button (click)="startMemoryTimer()" color="tertiary">Start</ion-button>
-            }
-            @if (memoryTimer) {
-              <ion-button (click)="stopMemoryTimer()" color="tertiary">Stop</ion-button>
-            }
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col>
-            @if (!memoryHide && memoryAutocompleteFieldName) {
-              <span>OK {{ memoryHide }}</span>
-              <mat-autocomplete-field
-                formControlName="entity"
-                [config]="autocompleteFields.get(memoryAutocompleteFieldName)"
-                [mobile]="memoryMobile"
-                [equals]="equals"
-                [logPrefix]="'[combo-memory-leak]'"
-              ></mat-autocomplete-field>
-            }
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    }
-
-    <!-- Mobile mode -->
-    @if (mode === 'mobile') {
-      <ion-grid>
-        <ion-row>
-          <!-- using suggestFn (and favorites) -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">suggestFn</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[], favoriteItems: any[]</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-suggestFn')"
-                  [favoriteItems]="_favoriteItems"
-                  [mobile]="true"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-1]'"
-                  [required]="true"
-                  placeholder="Suggest field"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-
-          <!-- Far items (not in the first page) -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Entity far in the list (not in first page)</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre style="white-space: normal !important">
-                        value: {{ stringify(form.controls.farEntity.value) }}</pre
-                      >
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="farEntity"
-                  #farEntityField
-                  [config]="autocompleteFields.get('entity-far')"
-                  [favoriteItems]="_favoriteFarItems"
-                  [mobile]="true"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-far]'"
-                  [debug]="true"
-                  [required]="true"
-                  [clearable]="true"
-                  placeholder="Far item (in the list)"
-                >
-                  <ion-icon matPrefix name="contract"></ion-icon>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Items is an Observable</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [placeholder]="'Item from observable'"
-                  [mobile]="true"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-observable]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">showAllOnFocus + required + NO searchbar</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [mobile]="true"
-                  [equals]="equals"
-                  showSearchBar="false"
-                  showAllOnFocus="true"
-                  [logPrefix]="'[combo-mobile-no-searchbar]'"
-                  [required]="true"
-                  placeholder="No search bar"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Control value if missing in items</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="missingEntity"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [mobile]="true"
-                  [equals]="equals"
-                  [clearable]="true"
-                  [logPrefix]="'[combo-mobile-2]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">search with a suggestLengthThreshold</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>
-                          suggest: (value, filter) => LoadResult&lt;any&gt;
-                          suggestLengthThreshold: '3'</pre
-                      >
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="emptyEntity"
-                  [config]="autocompleteFields.get('entity-items-filter')"
-                  [placeholder]="'Entity'"
-                  [mobile]="true"
-                  [equals]="equals"
-                  [suggestLengthThreshold]="3"
-                  [logPrefix]="'[combo-mobile-suggestLengthThreshold]'"
-                  [required]="true"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">Multiple value</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small><pre>multiple: true</pre></small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entities"
-                  [config]="autocompleteFields.get('entities-items-filter')"
-                  [placeholder]="'Multiple'"
-                  [mobile]="true"
-                  [multiple]="true"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-multiple]'"
-                  [debug]="true"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Disabled control</ion-label>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="disableEntity"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [mobile]="true"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-2]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">In modal</ion-label>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-button (click)="ionModal.present()">Open modal</ion-button>
-                <ion-modal>
-                  <ng-template>
-                    <ion-header>
-                      <ion-toolbar>
-                        <ion-title>Modal with embed auto complete field</ion-title>
-                        <ion-buttons slot="end">
-                          <ion-button (click)="ionModal.dismiss()">Close</ion-button>
-                        </ion-buttons>
-                      </ion-toolbar>
-                    </ion-header>
-                    <ion-content class="ion-padding">
-                      <div class="form-container">
-                        <ion-card>
-                          <ion-card-content>
-                            <mat-autocomplete-field
-                              formControlName="entity"
-                              [tabindex]="10000"
-                              [config]="autocompleteFields.get('entity-suggestFn')"
-                              [mobile]="true"
-                              [equals]="equals"
-                              [logPrefix]="'[combo-mobile-modal]'"
-                              [required]="true"
-                              placeholder="Suggest field"
-                            ></mat-autocomplete-field>
-                          </ion-card-content>
-                        </ion-card>
-                        <ion-card>
-                          <ion-card-content>
-                            <mat-autocomplete-field
-                              formControlName="entity"
-                              [tabindex]="10000"
-                              [config]="autocompleteFields.get('entity-items-filter')"
-                              [mobile]="true"
-                              [equals]="equals"
-                              [suggestLengthThreshold]="3"
-                              [logPrefix]="'[combo-mobile-modal-suggestLengthThreshold]'"
-                              [required]="true"
-                              placeholder="Suggest field"
-                            ></mat-autocomplete-field>
-                          </ion-card-content>
-                        </ion-card>
-                      </div>
-                    </ion-content>
-                  </ng-template>
-                </ion-modal>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col size="9">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Change filter</ion-label>
-                  <ion-card-subtitle>
-                    <ion-text color="medium">
-                      <small>
-                        <pre></pre>
-                      </small>
-                    </ion-text>
-                  </ion-card-subtitle>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid class="ion-no-padding">
-                  <ion-row>
-                    <ion-col>
-                      <ion-button (click)="updateFilter(filterChangeField, 'entity-items-filter')">
-                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}
-                      </ion-button>
-                    </ion-col>
-                    <ion-col>
-                      <mat-autocomplete-field
-                        formControlName="entity"
-                        #filterChangeField
-                        [config]="autocompleteFields.get('entity-items-filter')"
-                        [mobile]="true"
-                        [equals]="equals"
-                        [logPrefix]="'[combo-mobile-filter]'"
-                      ></mat-autocomplete-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="3">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Large combo</ion-label>
-                  <ion-card-subtitle>
-                    <ion-text color="medium">
-                      <small>
-                        <pre>
-mobile: true
-panelWidth="500px"</pre
-                        >
-                      </small>
-                    </ion-text>
-                  </ion-card-subtitle>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  [mobile]="true"
-                  [panelWidth]="'500px'"
-                  [matAutocompletePosition]="'auto'"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-large]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-
-          <ion-col size="3">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Fit content combo</ion-label>
-                  <ion-card-subtitle>
-                    <ion-text color="medium">
-                      <small>
-                        <pre>
-mobile: true
-panelClass="mat-select-panel-fit-content"</pre
-                        >
-                      </small>
-                    </ion-text>
-                  </ion-card-subtitle>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  [mobile]="true"
-                  [matAutocompletePosition]="'auto'"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-panelClass]'"
-                  panelClass="mat-select-panel-fit-content"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">Readonly toggle</ion-text>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <ion-col size="4">
-                      <mat-checkbox
-                        (change)="readonlyField.readonly = $event.checked"
-                        [checked]="readonlyField.readonly"
-                      >
-                        Readonly ?
-                      </mat-checkbox>
-                    </ion-col>
-                    <ion-col size="4">
-                      <mat-checkbox #showIcons [checked]="false">Icons ?</mat-checkbox>
-                    </ion-col>
-                    <ion-col size="4">
-                      <mat-checkbox #showHint [checked]="false">Hint ?</mat-checkbox>
-                    </ion-col>
-                  </ion-row>
-                  <ion-row>
-                    <ion-col>
-                      <mat-autocomplete-field
-                        #readonlyField
-                        formControlName="entity"
-                        [config]="autocompleteFields.get('entity-items')"
-                        [placeholder]="'Entity'"
-                        [mobile]="true"
-                        [equals]="equals"
-                        [logPrefix]="'[combo-mobile-readonly]'"
-                        [readonly]="true"
-                        [clearable]="!readonlyField.readonly"
-                      >
-                        @if (showIcons.checked) {
-                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>
-                        }
-                        @if (showIcons.checked) {
-                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>
-                        }
-                        @if (showHint.checked) {
-                          <mat-hint matHint>Some hint</mat-hint>
-                        }
-                      </mat-autocomplete-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Full size panel</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>panelClass: 'full-size'</pre>
-                      or
-                      <pre>panelWidth: '100vw'</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  [mobile]="true"
-                  panelClass="full-size"
-                  panelWidth="100vw"
-                  [matAutocompletePosition]="'above'"
-                  [logPrefix]="'[combo-mobile-full-size]'"
-                  [debug]="true"
-                  [showAllOnFocus]="true"
-                  [showPanelOnFocus]="true"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Autocomplete with button</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre style="white-space: normal !important">
-                        value: {{ stringify(form.controls.withButton.value) }}</pre
-                      >
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="withButton"
-                  [config]="autocompleteFields.get('entity-with-button')"
-                  [mobile]="true"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-mobile-with-button]'"
-                  [debug]="true"
-                  [required]="true"
-                  [clearable]="true"
-                  placeholder="With button"
-                >
-                  <button matAfter type="button" mat-icon-button tabindex="-1" title="Filter" [color]="'primary'">
-                    <mat-icon>filter_list_alt</mat-icon>
-                  </button>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    }
-
-    <!-- Desktop mode -->
-    @if (mode === 'desktop') {
-      <ion-grid>
-        <ion-row>
-          <!-- Using suggestFn (and favorites) -->
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">suggestFn</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>
-showAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]
-                      </pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-suggestFn')"
-                  [favoriteItems]="_favoriteItems"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [clearable]="true"
-                  [logPrefix]="'[combo-desktop-suggest]'"
-                  placeholder="Suggest field"
-                  [debug]="true"
-                >
-                  <ion-icon matPrefix name="contract"></ion-icon>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-
-          <!-- Using service -->
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">Service</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [config]="autocompleteFields.get('entity-items-filter')"
-                  [placeholder]="'Filtered field'"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [clearable]="true"
-                  [logPrefix]="'[combo-desktop-service]'"
-                  [debug]="true"
-                >
-                  <ion-icon matPrefix name="contract"></ion-icon>
-                </mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">search with a suggestLengthThreshold</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>
-                            suggest: (value, filter) => LoadResult&lt;any&gt;
-                            suggestLengthThreshold: '3'</pre
-                      >
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="emptyEntity"
-                  [config]="autocompleteFields.get('entity-items-filter')"
-                  [placeholder]="'Filtered field'"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [suggestLengthThreshold]="3"
-                  [logPrefix]="'[combo-desktop-suggestLengthThreshold]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">Items is an array</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [placeholder]="'Item from array'"
-                  [config]="autocompleteFields.get('entity-items')"
-                  [logPrefix]="'[combo-desktop-array-1]'"
-                  [equals]="equals"
-                  [mobile]="false"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">Items is an Observable</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>items: Observable&lt;any[]&gt;</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [placeholder]="'Item from observable'"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [logPrefix]="'[combo-desktop-2]'"
-                  [equals]="equals"
-                  [mobile]="false"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">Multiple value</ion-text>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small><pre>multiple: true</pre></small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entities"
-                  [config]="autocompleteFields.get('entities-items-filter')"
-                  [placeholder]="'Multiple'"
-                  [mobile]="false"
-                  [multiple]="true"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-desktop-multiple]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Control value if missing in items</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>items: Observable&lt;any[]&gt;</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="missingEntity"
-                  [placeholder]="'Missing item'"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-desktop-missing]'"
-                  [mobile]="false"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Full size panel</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>panelClass: 'full-size'</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [placeholder]="'Full size panel'"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  [mobile]="false"
-                  [panelClass]="'full-size'"
-                  [matAutocompletePosition]="'above'"
-                  [logPrefix]="'[combo-desktop-full-size]'"
-                  [debug]="true"
-                  [showAllOnFocus]="true"
-                  [showPanelOnFocus]="true"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Disabled control</ion-label>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="disableEntity"
-                  [placeholder]="'Disable field'"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-desktop-disable]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Readonly control</ion-label>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [placeholder]="'Readonly field'"
-                  [config]="autocompleteFields.get('entity-$items')"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-desktop-readonly]'"
-                  [readonly]="true"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col size="9">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Full size combo</ion-label>
-                  <ion-card-subtitle>
-                    <ion-text color="medium">
-                      <small>
-                        <pre>panelClass: 'full-size'</pre>
-                        or
-                        <pre>panelWidth: '100vw'</pre>
-                      </small>
-                    </ion-text>
-                  </ion-card-subtitle>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [placeholder]="'Full size panel'"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  [mobile]="false"
-                  panelClass="full-size"
-                  panelWidth="100vw"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-desktop-full-size]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="3">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Large combo</ion-label>
-                  <ion-card-subtitle>
-                    <ion-text color="medium">
-                      <small>
-                        <pre>panelWidth: string</pre>
-                      </small>
-                    </ion-text>
-                  </ion-card-subtitle>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [placeholder]="'Fixed panel width (500px)'"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  [mobile]="false"
-                  panelWidth="500px"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-desktop-large]'"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="3">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Fit content</ion-label>
-                  <ion-card-subtitle>
-                    <ion-text color="medium">
-                      <small>
-                        <pre>panelClass="mat-select-panel-fit-content"</pre>
-                      </small>
-                    </ion-text>
-                  </ion-card-subtitle>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-autocomplete-field
-                  formControlName="entity"
-                  [placeholder]="'Fit content'"
-                  [config]="autocompleteFields.get('entity-items-large')"
-                  [mobile]="false"
-                  [equals]="equals"
-                  [logPrefix]="'[combo-desktop-panelClass]'"
-                  panelClass="mat-select-panel-fit-content"
-                ></mat-autocomplete-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-text color="primary">Readonly toggle</ion-text>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <ion-col size="4">
-                      <mat-checkbox
-                        (change)="readonlyField.readonly = $event.checked"
-                        [checked]="readonlyField.readonly"
-                      >
-                        Readonly ?
-                      </mat-checkbox>
-                    </ion-col>
-                    <ion-col size="4">
-                      <mat-checkbox #showIcons2 [checked]="false">Icons ?</mat-checkbox>
-                    </ion-col>
-                    <ion-col size="4">
-                      <mat-checkbox #showHint2 [checked]="false">Hint ?</mat-checkbox>
-                    </ion-col>
-                  </ion-row>
-                  <ion-row>
-                    <ion-col>
-                      <mat-autocomplete-field
-                        #readonlyField
-                        formControlName="entity"
-                        [config]="autocompleteFields.get('entity-items-filter')"
-                        [placeholder]="'Filtered field'"
-                        [mobile]="false"
-                        [equals]="equals"
-                        [logPrefix]="'[combo-desktop-readonly]'"
-                        [readonly]="true"
-                        [clearable]="!readonlyField.readonly"
-                      >
-                        @if (showIcons2.checked) {
-                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>
-                        }
-                        @if (showIcons2.checked) {
-                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>
-                        }
-                        @if (showHint2.checked) {
-                          <mat-hint>Some hint</mat-hint>
-                        }
-                      </mat-autocomplete-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    }
-  </form>
-</ion-content>