npm - @sumaris-net/ngx-components - Versions diffs - 2.8.1-alpha3 → 2.8.1-beta2 - Mend

@sumaris-net/ngx-components 2.8.1-alpha3 → 2.8.1-beta2

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 (250) hide show

package/esm2022/src/app/shared/material/autocomplete/testing/autocomplete.test.mjs CHANGED Viewed

@@ -206,10 +206,10 @@ export class AutocompleteTestPage {
     stringify(value) {
         return JSON.stringify(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", 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>\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><pre>items: Observable&lt;any[]&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [logPrefix]=\"'[combo-temp]'\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [mobile]=\"true\"\n                  [debug]=\"true\"\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\">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=\"entity\"\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>mobile: true, class=\"min-width-large\"</pre>\n                          </small>\n                        </ion-text>\n                      </ion-card-subtitle>\n                    </ion-card-title>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-autocomplete-field\n                      formControlName=\"entity\"\n                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                      [mobile]=\"true\"\n                      [class]=\"'min-width-large'\"\n                      panelWidth=\"400px\"\n                      [equals]=\"equals\"\n                      [logPrefix]=\"'[combo-mobile-large]'\"\n                    ></mat-autocomplete-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            </ion-row>\n            <ion-row>\n              <ion-col size=\"6\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-text color=\"primary\">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=\"3\">\n                          <mat-checkbox (change)=\"readonlyField.readonly = $event.checked\" [checked]=\"readonlyField.readonly\">\n                            Readonly ?\n                          </mat-checkbox>\n                        </ion-col>\n                      </ion-row>\n                      <ion-row>\n                        <ion-col>\n                          <mat-autocomplete-field\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                          ></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\">Fullscreen</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre>class: 'mat-mdc-autocomplete-panel-full-size'</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-autocomplete-field\n                      formControlName=\"entity\"\n                      [config]=\"autocompleteFields.get('entity-$items')\"\n                      [mobile]=\"true\"\n                      [class]=\"'mat-mdc-autocomplete-panel-full-size'\"\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-row>\n          </ion-grid>\n        }\n\n        <!-- Desktop mode -->\n        @if (mode === 'desktop') {\n          <ion-grid>\n            <ion-row>\n              <ion-col>\n                <ion-text><h4>Desktop mode</h4></ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row>\n              <ion-col size=\"6\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-text color=\"primary\">items from suggest function</ion-text>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre></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-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\">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=\"entity\"\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                        [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                        [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                        [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: 'mat-mdc-autocomplete-panel-full-size'</pre>\n                          </small>\n                        </ion-text>\n                      </ion-card-subtitle>\n                    </ion-card-header>\n                    <ion-card-content>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-$items')\"\n                        [mobile]=\"false\"\n                        [class]=\"'mat-mdc-autocomplete-panel-full-size'\"\n                        [matAutocompletePosition]=\"'above'\"\n                        [logPrefix]=\"'[combo-desktop-full-size]'\"\n                        [debug]=\"true\"\n                        [showAllOnFocus]=\"true\"\n                        [showPanelOnFocus]=\"true\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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]=\"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                        [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>class=\"mat-mdc-autocomplete-panel-full-size\"</pre>\n                            </small>\n                          </ion-text>\n                        </ion-card-subtitle>\n                      </ion-card-title>\n                    </ion-card-header>\n                    <ion-card-content>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-large')\"\n                        [mobile]=\"false\"\n                        class=\"mat-mdc-autocomplete-panel-full-size\"\n                        panelWidth=\"100vw\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-full-size]'\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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                        [config]=\"autocompleteFields.get('entity-items-large')\"\n                        [mobile]=\"false\"\n                        panelWidth=\"400px\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-large]'\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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=\"6\">\n                            <mat-checkbox (change)=\"readonlyField.readonly = $event.checked\" [checked]=\"readonlyField.readonly\">\n                              Readonly ?\n                            </mat-checkbox>\n                          </ion-col>\n                          <ion-col size=\"6\">\n                            <mat-checkbox #showIcons [checked]=\"false\">Icons ?</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 (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                            </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: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.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: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i9.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i10.MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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>\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><pre>items: Observable&lt;any[]&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [logPrefix]=\"'[combo-temp]'\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [mobile]=\"true\"\n                  [debug]=\"true\"\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\">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=\"entity\"\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>mobile: true, class=\"min-width-large\"</pre>\n                          </small>\n                        </ion-text>\n                      </ion-card-subtitle>\n                    </ion-card-title>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-autocomplete-field\n                      formControlName=\"entity\"\n                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                      [mobile]=\"true\"\n                      [class]=\"'min-width-large'\"\n                      panelWidth=\"400px\"\n                      [equals]=\"equals\"\n                      [logPrefix]=\"'[combo-mobile-large]'\"\n                    ></mat-autocomplete-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            </ion-row>\n            <ion-row>\n              <ion-col size=\"6\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-text color=\"primary\">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=\"3\">\n                          <mat-checkbox (change)=\"readonlyField.readonly = $event.checked\" [checked]=\"readonlyField.readonly\">\n                            Readonly ?\n                          </mat-checkbox>\n                        </ion-col>\n                      </ion-row>\n                      <ion-row>\n                        <ion-col>\n                          <mat-autocomplete-field\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                          ></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\">Fullscreen</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre>class: 'mat-mdc-autocomplete-panel-full-size'</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-autocomplete-field\n                      formControlName=\"entity\"\n                      [config]=\"autocompleteFields.get('entity-$items')\"\n                      [mobile]=\"true\"\n                      [class]=\"'mat-mdc-autocomplete-panel-full-size'\"\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-row>\n          </ion-grid>\n        }\n\n        <!-- Desktop mode -->\n        @if (mode === 'desktop') {\n          <ion-grid>\n            <ion-row>\n              <ion-col>\n                <ion-text><h4>Desktop mode</h4></ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row>\n              <ion-col size=\"6\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-text color=\"primary\">items from suggest function</ion-text>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre></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-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\">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=\"entity\"\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                        [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                        [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                        [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: 'mat-mdc-autocomplete-panel-full-size'</pre>\n                          </small>\n                        </ion-text>\n                      </ion-card-subtitle>\n                    </ion-card-header>\n                    <ion-card-content>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-$items')\"\n                        [mobile]=\"false\"\n                        [class]=\"'mat-mdc-autocomplete-panel-full-size'\"\n                        [matAutocompletePosition]=\"'above'\"\n                        [logPrefix]=\"'[combo-desktop-full-size]'\"\n                        [debug]=\"true\"\n                        [showAllOnFocus]=\"true\"\n                        [showPanelOnFocus]=\"true\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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]=\"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                        [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>class=\"mat-mdc-autocomplete-panel-full-size\"</pre>\n                            </small>\n                          </ion-text>\n                        </ion-card-subtitle>\n                      </ion-card-title>\n                    </ion-card-header>\n                    <ion-card-content>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-large')\"\n                        [mobile]=\"false\"\n                        class=\"mat-mdc-autocomplete-panel-full-size\"\n                        panelWidth=\"100vw\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-full-size]'\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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                        [config]=\"autocompleteFields.get('entity-items-large')\"\n                        [mobile]=\"false\"\n                        panelWidth=\"400px\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-large]'\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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=\"6\">\n                            <mat-checkbox (change)=\"readonlyField.readonly = $event.checked\" [checked]=\"readonlyField.readonly\">\n                              Readonly ?\n                            </mat-checkbox>\n                          </ion-col>\n                          <ion-col size=\"6\">\n                            <mat-checkbox #showIcons [checked]=\"false\">Icons ?</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 (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                            </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: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.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: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i9.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i10.MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AutocompleteTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", 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>\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><pre>items: Observable&lt;any[]&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [logPrefix]=\"'[combo-temp]'\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [mobile]=\"true\"\n                  [debug]=\"true\"\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\">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=\"entity\"\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>mobile: true, class=\"min-width-large\"</pre>\n                          </small>\n                        </ion-text>\n                      </ion-card-subtitle>\n                    </ion-card-title>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-autocomplete-field\n                      formControlName=\"entity\"\n                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                      [mobile]=\"true\"\n                      [class]=\"'min-width-large'\"\n                      panelWidth=\"400px\"\n                      [equals]=\"equals\"\n                      [logPrefix]=\"'[combo-mobile-large]'\"\n                    ></mat-autocomplete-field>\n                  </ion-card-content>\n                </ion-card>\n              </ion-col>\n            </ion-row>\n            <ion-row>\n              <ion-col size=\"6\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-text color=\"primary\">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=\"3\">\n                          <mat-checkbox (change)=\"readonlyField.readonly = $event.checked\" [checked]=\"readonlyField.readonly\">\n                            Readonly ?\n                          </mat-checkbox>\n                        </ion-col>\n                      </ion-row>\n                      <ion-row>\n                        <ion-col>\n                          <mat-autocomplete-field\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                          ></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\">Fullscreen</ion-label>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small>\n                          <pre>class: 'mat-mdc-autocomplete-panel-full-size'</pre>\n                        </small>\n                      </ion-text>\n                    </ion-card-subtitle>\n                  </ion-card-header>\n                  <ion-card-content>\n                    <mat-autocomplete-field\n                      formControlName=\"entity\"\n                      [config]=\"autocompleteFields.get('entity-$items')\"\n                      [mobile]=\"true\"\n                      [class]=\"'mat-mdc-autocomplete-panel-full-size'\"\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-row>\n          </ion-grid>\n        }\n\n        <!-- Desktop mode -->\n        @if (mode === 'desktop') {\n          <ion-grid>\n            <ion-row>\n              <ion-col>\n                <ion-text><h4>Desktop mode</h4></ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row>\n              <ion-col size=\"6\">\n                <ion-card>\n                  <ion-card-header>\n                    <ion-card-title>\n                      <ion-text color=\"primary\">items from suggest function</ion-text>\n                    </ion-card-title>\n                    <ion-card-subtitle>\n                      <ion-text color=\"medium\">\n                        <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre></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-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\">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=\"entity\"\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                        [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                        [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                        [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: 'mat-mdc-autocomplete-panel-full-size'</pre>\n                          </small>\n                        </ion-text>\n                      </ion-card-subtitle>\n                    </ion-card-header>\n                    <ion-card-content>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-$items')\"\n                        [mobile]=\"false\"\n                        [class]=\"'mat-mdc-autocomplete-panel-full-size'\"\n                        [matAutocompletePosition]=\"'above'\"\n                        [logPrefix]=\"'[combo-desktop-full-size]'\"\n                        [debug]=\"true\"\n                        [showAllOnFocus]=\"true\"\n                        [showPanelOnFocus]=\"true\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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]=\"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                        [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>class=\"mat-mdc-autocomplete-panel-full-size\"</pre>\n                            </small>\n                          </ion-text>\n                        </ion-card-subtitle>\n                      </ion-card-title>\n                    </ion-card-header>\n                    <ion-card-content>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-large')\"\n                        [mobile]=\"false\"\n                        class=\"mat-mdc-autocomplete-panel-full-size\"\n                        panelWidth=\"100vw\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-full-size]'\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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                        [config]=\"autocompleteFields.get('entity-items-large')\"\n                        [mobile]=\"false\"\n                        panelWidth=\"400px\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-large]'\"\n                      ></mat-autocomplete-field>\n                    </ion-card-content>\n                  </ion-card>\n                </ion-col>\n                <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=\"6\">\n                            <mat-checkbox (change)=\"readonlyField.readonly = $event.checked\" [checked]=\"readonlyField.readonly\">\n                              Readonly ?\n                            </mat-checkbox>\n                          </ion-col>\n                          <ion-col size=\"6\">\n                            <mat-checkbox #showIcons [checked]=\"false\">Icons ?</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 (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                            </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.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { farEntityField: [{

package/esm2022/src/app/shared/material/badge/badge.directive.mjs CHANGED Viewed

@@ -161,10 +161,10 @@ export class BadgeDirective extends MatBadge {
             }*/
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { content: ["appBadge", "content"], disabled: ["appBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], hidden: ["appBadgeHidden", "hidden"], overlap: ["appBadgeOverlap", "overlap"], position: ["appBadgePosition", "position"], appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { content: ["appBadge", "content"], disabled: ["appBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], hidden: ["appBadgeHidden", "hidden"], overlap: ["appBadgeOverlap", "overlap"], position: ["appBadgePosition", "position"], appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: BadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',

package/esm2022/src/app/shared/material/badge/badge.module.mjs CHANGED Viewed

@@ -5,11 +5,11 @@ import { BadgeDirective } from './badge.directive';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i0 from "@angular/core";
 export class SharedBadgeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: SharedBadgeModule, declarations: [BadgeDirective], imports: [CommonModule, IonicModule, MatBadgeModule], exports: [BadgeDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedBadgeModule, imports: [CommonModule, IonicModule, MatBadgeModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SharedBadgeModule, declarations: [BadgeDirective], imports: [CommonModule, IonicModule, MatBadgeModule], exports: [BadgeDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedBadgeModule, imports: [CommonModule, IonicModule, MatBadgeModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, IonicModule, MatBadgeModule],

package/esm2022/src/app/shared/material/badge/badge.test.mjs CHANGED Viewed

@@ -32,10 +32,10 @@ export class MatBadgeTestPage {
         this.matBadgeContent = event.target.value;
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatBadgeTestPage, selector: "mat-badge-test", 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>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i8.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MatBadgeTestPage, selector: "mat-badge-test", 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>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i8.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatBadgeTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatBadgeTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'mat-badge-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>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });

package/esm2022/src/app/shared/material/boolean/boolean.module.mjs CHANGED Viewed

@@ -15,8 +15,8 @@ import { MatBooleanField } from './material.boolean';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatBooleanModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedMatBooleanModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: SharedMatBooleanModule, declarations: [MatBooleanField], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedMatBooleanModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SharedMatBooleanModule, declarations: [MatBooleanField], imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -26,7 +26,7 @@ export class SharedMatBooleanModule {
             MatRadioModule,
             MatCheckboxModule,
             NgxMaterialTimepickerModule, i1.TranslateModule, SharedDirectivesModule], exports: [MatBooleanField] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedMatBooleanModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedMatBooleanModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -39,7 +39,7 @@ export class SharedMatBooleanModule {
             TranslateModule.forChild(),
             SharedDirectivesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedMatBooleanModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedMatBooleanModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [