npm - @sumaris-net/ngx-components - Versions diffs - 2.6.4-alpha5 → 2.6.4-alpha6 - Mend

@sumaris-net/ngx-components 2.6.4-alpha5 → 2.6.4-alpha6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1179) hide show

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

@@ -1,876 +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>
-    <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 class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
-    <ion-grid *ngIf="mode === 'temp'">
-      <ion-row>
-        <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"
-                                      [config]="autocompleteFields.get('entity-suggestFn')"
-                                      [logPrefix]="'[combo-temp]'"
-                                      [equals]="equals"
-                                      [suggestLengthThreshold]="3"
-                                      [mobile]="true"
-                                      [debug]="true"
-              ></mat-autocomplete-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-    <ion-grid *ngIf="mode === 'memory'">
-      <!-- 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">
-            <input matInput type="text" hidden placeholder="Items type">
-            <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">
-            <input matInput type="text" hidden placeholder="Mobile ?">
-            <mat-checkbox (change)="memoryMobile=$event.checked" [checked]="memoryMobile">
-            </mat-checkbox>
-          </mat-form-field>
-        </ion-col>
-        <ion-col size="2">
-          <ion-button *ngIf="!memoryTimer" (click)="startMemoryTimer()" color="tertiary">Start</ion-button>
-          <ion-button *ngIf="memoryTimer" (click)="stopMemoryTimer()" color="tertiary">Stop</ion-button>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col>
-          <mat-autocomplete-field formControlName="entity"
-                                  *ngIf="!memoryHide && memoryAutocompleteFieldName"
-                                  [config]="autocompleteFields.get(memoryAutocompleteFieldName)"
-                                  [mobile]="memoryMobile"
-                                  [equals]="equals"
-                                  [logPrefix]="'[combo-memory-leak]'">
-          </mat-autocomplete-field>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-    <!-- Mobile mode -->
-    <ion-grid *ngIf="mode === 'mobile'">
-      <ion-row>
-        <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')"
-                                      [mobile]="true"
-                                      [equals]="equals"
-                                      [logPrefix]="'[combo-mobile-far]'"
-                                      [debug]="true"
-                                      [required]="true"
-                                      [clearable]="true"
-                                      placeholder="Far entity (in the list)"
-              ></mat-autocomplete-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">
-                  Suggest() function
-                </ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-autocomplete-field formControlName="entity"
-                                      [config]="autocompleteFields.get('entity-suggestFn')"
-                                      [mobile]="true"
-                                      [equals]="equals"
-                                      [logPrefix]="'[combo-mobile-1]'"
-                                      [required]="true"
-                                      placeholder="Suggest field"
-              ></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')"
-                                      [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">
-                  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="entity"
-                                      [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]'"
-              ></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"
-                                                floatLabel="never"
-                                                [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"
-                                                  floatLabel="never"
-                                                  [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>class="min-width-large"</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"
-                                      class="min-width-large"
-                                      panelWidth="400px"
-                                      [equals]="equals"
-                                      [logPrefix]="'[combo-mobile-large]'"
-              ></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="3">
-                    <mat-checkbox (change)="readonlyField.readonly=$event.checked" [checked]="readonlyField.readonly">
-                      Readonly ?
-                    </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">
-                    </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">
-                  Fullscreen
-                </ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>class: 'mat-autocomplete-panel-full-size'</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"
-                                      [class]="'mat-autocomplete-panel-full-size'"
-                                      [matAutocompletePosition]="'above'"
-                                      [logPrefix]="'[combo-mobile-full-size]'"
-                                      [debug]="true"
-                                      [showAllOnFocus]="true"
-                                      [showPanelOnFocus]="true"
-              ></mat-autocomplete-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-    <!-- Desktop mode -->
-    <ion-grid *ngIf="mode === 'desktop'">
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>Desktop mode</h4></ion-text>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col size="6">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-text color="primary">
-                  items from suggest function
-                </ion-text>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small><pre>suggest: (value, 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]="'Entity'"
-                                      [mobile]="false"
-                                      [equals]="equals"
-                                      [clearable]="true"
-                                      [logPrefix]="'[combo-desktop-suggest]'"
-                                      [debug]="true">
-              </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="entity"
-                                      [config]="autocompleteFields.get('entity-items-filter')"
-                                      [placeholder]="'Entity'"
-                                      [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"
-                                      [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"
-                                      [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"
-                                      [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>class: 'mat-autocomplete-panel-full-size'</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-autocomplete-field formControlName="entity"
-                                      [config]="autocompleteFields.get('entity-$items')"
-                                      [mobile]="false"
-                                      [class]="'mat-autocomplete-panel-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"
-                                      [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"
-                                      [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>class="mat-autocomplete-panel-full-size"</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]="false"
-                                      class="mat-autocomplete-panel-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"
-                                      [config]="autocompleteFields.get('entity-items-large')"
-                                      [mobile]="false"
-                                      panelWidth="400px"
-                                      [equals]="equals"
-                                      [logPrefix]="'[combo-desktop-large]'"
-              ></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="3">
-                    <mat-checkbox (change)="readonlyField.readonly=$event.checked" [checked]="readonlyField.readonly">
-                      Readonly ?
-                    </mat-checkbox>
-                  </ion-col>
-                  <ion-col size="3">
-                    <mat-checkbox #showIcons [checked]="false">
-                      Icons ?
-                    </mat-checkbox>
-                  </ion-col>
-                </ion-row>
-                <ion-row>
-                  <ion-col>
-                    <mat-autocomplete-field #readonlyField formControlName="entity"
-                                            [config]="autocompleteFields.get('entity-items-filter')"
-                                            [placeholder]="'Entity'"
-                                            [mobile]="false"
-                                            [equals]="equals"
-                                            [logPrefix]="'[combo-desktop-readonly]'"
-                                            [readonly]="true"
-                                            [clearable]="!readonlyField.readonly">
-                      <mat-icon matPrefix *ngIf="showIcons.checked">keyboard_arrow_right</mat-icon>
-                      <mat-icon matSuffix *ngIf="showIcons.checked">keyboard_arrow_left</mat-icon>
-                    </mat-autocomplete-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-</ion-content>