@sumaris-net/ngx-components 2.7.3-rc19 → 2.7.3-rc21

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

@@ -6702,7 +6702,7 @@ class MatAutocompleteField {
                 multi: true,
                 useExisting: forwardRef(() => MatAutocompleteField),
             },
-        ], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "ionSearchbar", first: true, predicate: ["ionSearchbar"], descendants: true }, { propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field\n        *ngIf=\"_readonly; else writable\"\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [title]=\"_displayValue\"\n        class=\"mat-form-field-disabled\"\n      >\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n        <ion-text>{{ displayWith(value) }}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [class.mat-form-field-disabled]=\"disabled\"\n          [title]=\"_displayValue\"\n        >\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          <mat-select\n            #matSelect\n            *ngIf=\"mobile || multiple; else desktopTemplate\"\n            hideSingleSelectionIndicator\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n            [tabindex]=\"_tabindex\"\n            [panelClass]=\"classList\"\n            (focus)=\"filterMatSelectFocusEvent($event)\"\n            (blur)=\"filterMatSelectBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            [compareWith]=\"equals\"\n            [multiple]=\"multiple\"\n            [typeaheadDebounceInterval]=\"debounceTime * 10\"\n            [required]=\"required\"\n          >\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <mat-optgroup *ngIf=\"showSearchBar\"\n                          class=\"mat-select-searchbar\"\n                          [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n              <ion-searchbar\n                #ionSearchbar\n                inputmode=\"search\"\n                autocomplete=\"off\"\n                animated=\"true\"\n                showClearButton=\"true\"\n                [debounce]=\"debounceTime\"\n                (ionClear)=\"markAsLoading()\"\n                (ionInput)=\"ionSearchBarChanged($event)\"\n                [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n              ></ion-searchbar>\n            </mat-optgroup>\n\n            <!-- Headers -->\n            <ion-row\n              class=\"mat-select-header column ion-no-padding\"\n              [class.multiple]=\"multiple\"\n              [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n            >\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple && !clearable\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"_$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n\n              <!-- Options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col\n                    *ngFor=\"let path of displayAttributes; index as i\"\n                    [size]=\"displayColumnSizes[i]\"\n                    class=\"ion-align-self-center\"\n                  >\n                    <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option\n                *ngIf=\"_moreItemsCount\"\n                (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <mat-option\n              *ngIf=\"itemCount as count\"\n              class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\"\n              disabled\n            >\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </mat-option>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option\n                *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"floatLabel === 'never' && placeholder\"\n              [appAutofocus]=\"autofocus\"\n              [tabindex]=\"_tabindex\"\n              [required]=\"required\"\n              (click)=\"clicked.emit($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keydown.escape)=\"keydownEscape.emit($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            />\n\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              autoActiveFirstOption\n              hideSingleSelectionIndicator\n              [displayWith]=\"displayWith\"\n              [class]=\"classList\"\n              [panelWidth]=\"panelWidth\"\n            >\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *rxIf=\"_$filteredItems; let items; else: loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    <i>{{ noResultMessage | translate }}</i>\n                  </ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col\n                      *ngFor=\"let path of displayAttributes; index as i\"\n                      [size]=\"displayColumnSizes[i]\"\n                      [title]=\"text.innerText\"\n                      class=\"ion-align-self-center\"\n                    >\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option\n                  *ngIf=\"_moreItemsCount\"\n                  (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option\n                  *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\">\n                    <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-autocomplete>\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"!mobile && !multiple\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle | translate\"\n  >\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n    [title]=\"(clearButtonTitle  || '') | translate\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:#00000078;font-size:150%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.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$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i9.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.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: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "ionSearchbar", first: true, predicate: ["ionSearchbar"], descendants: true }, { propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field\n        *ngIf=\"_readonly; else writable\"\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [title]=\"_displayValue\"\n        class=\"mat-form-field-disabled\"\n      >\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n        <ion-text>{{ displayWith(value) }}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [class.mat-form-field-disabled]=\"disabled\"\n          [title]=\"_displayValue\"\n        >\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          <mat-select\n            #matSelect\n            *ngIf=\"mobile || multiple; else desktopTemplate\"\n            hideSingleSelectionIndicator\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n            [tabindex]=\"_tabindex\"\n            [panelClass]=\"classList\"\n            (focus)=\"filterMatSelectFocusEvent($event)\"\n            (blur)=\"filterMatSelectBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            [compareWith]=\"equals\"\n            [multiple]=\"multiple\"\n            [typeaheadDebounceInterval]=\"debounceTime * 10\"\n            [required]=\"required\"\n          >\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <mat-optgroup *ngIf=\"showSearchBar\"\n                          class=\"mat-select-searchbar\"\n                          [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n              <ion-searchbar\n                #ionSearchbar\n                inputmode=\"search\"\n                autocomplete=\"off\"\n                animated=\"true\"\n                showClearButton=\"true\"\n                [debounce]=\"debounceTime\"\n                (ionClear)=\"markAsLoading()\"\n                (ionInput)=\"ionSearchBarChanged($event)\"\n                [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n              ></ion-searchbar>\n            </mat-optgroup>\n\n            <!-- Headers -->\n            <ion-row\n              class=\"mat-select-header column ion-no-padding\"\n              [class.multiple]=\"multiple\"\n              [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n            >\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple && !clearable\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"_$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n\n              <!-- Options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col\n                    *ngFor=\"let path of displayAttributes; index as i\"\n                    [size]=\"displayColumnSizes[i]\"\n                    class=\"ion-align-self-center\"\n                  >\n                    <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option\n                *ngIf=\"_moreItemsCount\"\n                (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <mat-option\n              *ngIf=\"itemCount as count\"\n              class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\"\n              disabled\n            >\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </mat-option>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option\n                *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"floatLabel === 'never' && placeholder\"\n              [appAutofocus]=\"autofocus\"\n              [tabindex]=\"_tabindex\"\n              [required]=\"required\"\n              (click)=\"clicked.emit($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keydown.escape)=\"keydownEscape.emit($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            />\n\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              autoActiveFirstOption\n              hideSingleSelectionIndicator\n              [displayWith]=\"displayWith\"\n              [class]=\"classList\"\n              [panelWidth]=\"panelWidth\"\n            >\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *rxIf=\"_$filteredItems; let items; else: loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    <i>{{ noResultMessage | translate }}</i>\n                  </ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col\n                      *ngFor=\"let path of displayAttributes; index as i\"\n                      [size]=\"displayColumnSizes[i]\"\n                      [title]=\"text.innerText\"\n                      class=\"ion-align-self-center\"\n                    >\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option\n                  *ngIf=\"_moreItemsCount\"\n                  (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option\n                  *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\">\n                    <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-autocomplete>\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"!mobile && !multiple\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle | translate\"\n  >\n    <ion-icon name=\"caret-down-outline\"></ion-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n    [title]=\"(clearButtonTitle  || '') | translate\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.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$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i9.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.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: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatAutocompleteField, decorators: [{
             type: Component,
@@ -6712,7 +6712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => MatAutocompleteField),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field\n        *ngIf=\"_readonly; else writable\"\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [title]=\"_displayValue\"\n        class=\"mat-form-field-disabled\"\n      >\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n        <ion-text>{{ displayWith(value) }}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [class.mat-form-field-disabled]=\"disabled\"\n          [title]=\"_displayValue\"\n        >\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          <mat-select\n            #matSelect\n            *ngIf=\"mobile || multiple; else desktopTemplate\"\n            hideSingleSelectionIndicator\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n            [tabindex]=\"_tabindex\"\n            [panelClass]=\"classList\"\n            (focus)=\"filterMatSelectFocusEvent($event)\"\n            (blur)=\"filterMatSelectBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            [compareWith]=\"equals\"\n            [multiple]=\"multiple\"\n            [typeaheadDebounceInterval]=\"debounceTime * 10\"\n            [required]=\"required\"\n          >\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <mat-optgroup *ngIf=\"showSearchBar\"\n                          class=\"mat-select-searchbar\"\n                          [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n              <ion-searchbar\n                #ionSearchbar\n                inputmode=\"search\"\n                autocomplete=\"off\"\n                animated=\"true\"\n                showClearButton=\"true\"\n                [debounce]=\"debounceTime\"\n                (ionClear)=\"markAsLoading()\"\n                (ionInput)=\"ionSearchBarChanged($event)\"\n                [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n              ></ion-searchbar>\n            </mat-optgroup>\n\n            <!-- Headers -->\n            <ion-row\n              class=\"mat-select-header column ion-no-padding\"\n              [class.multiple]=\"multiple\"\n              [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n            >\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple && !clearable\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"_$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n\n              <!-- Options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col\n                    *ngFor=\"let path of displayAttributes; index as i\"\n                    [size]=\"displayColumnSizes[i]\"\n                    class=\"ion-align-self-center\"\n                  >\n                    <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option\n                *ngIf=\"_moreItemsCount\"\n                (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <mat-option\n              *ngIf=\"itemCount as count\"\n              class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\"\n              disabled\n            >\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </mat-option>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option\n                *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"floatLabel === 'never' && placeholder\"\n              [appAutofocus]=\"autofocus\"\n              [tabindex]=\"_tabindex\"\n              [required]=\"required\"\n              (click)=\"clicked.emit($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keydown.escape)=\"keydownEscape.emit($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            />\n\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              autoActiveFirstOption\n              hideSingleSelectionIndicator\n              [displayWith]=\"displayWith\"\n              [class]=\"classList\"\n              [panelWidth]=\"panelWidth\"\n            >\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *rxIf=\"_$filteredItems; let items; else: loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    <i>{{ noResultMessage | translate }}</i>\n                  </ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col\n                      *ngFor=\"let path of displayAttributes; index as i\"\n                      [size]=\"displayColumnSizes[i]\"\n                      [title]=\"text.innerText\"\n                      class=\"ion-align-self-center\"\n                    >\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option\n                  *ngIf=\"_moreItemsCount\"\n                  (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option\n                  *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\">\n                    <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-autocomplete>\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"!mobile && !multiple\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle | translate\"\n  >\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n    [title]=\"(clearButtonTitle  || '') | translate\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:#00000078;font-size:150%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field\n        *ngIf=\"_readonly; else writable\"\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [title]=\"_displayValue\"\n        class=\"mat-form-field-disabled\"\n      >\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n        <ion-text>{{ displayWith(value) }}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [class.mat-form-field-disabled]=\"disabled\"\n          [title]=\"_displayValue\"\n        >\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          <mat-select\n            #matSelect\n            *ngIf=\"mobile || multiple; else desktopTemplate\"\n            hideSingleSelectionIndicator\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n            [tabindex]=\"_tabindex\"\n            [panelClass]=\"classList\"\n            (focus)=\"filterMatSelectFocusEvent($event)\"\n            (blur)=\"filterMatSelectBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            [compareWith]=\"equals\"\n            [multiple]=\"multiple\"\n            [typeaheadDebounceInterval]=\"debounceTime * 10\"\n            [required]=\"required\"\n          >\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <mat-optgroup *ngIf=\"showSearchBar\"\n                          class=\"mat-select-searchbar\"\n                          [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n              <ion-searchbar\n                #ionSearchbar\n                inputmode=\"search\"\n                autocomplete=\"off\"\n                animated=\"true\"\n                showClearButton=\"true\"\n                [debounce]=\"debounceTime\"\n                (ionClear)=\"markAsLoading()\"\n                (ionInput)=\"ionSearchBarChanged($event)\"\n                [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n              ></ion-searchbar>\n            </mat-optgroup>\n\n            <!-- Headers -->\n            <ion-row\n              class=\"mat-select-header column ion-no-padding\"\n              [class.multiple]=\"multiple\"\n              [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n            >\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple && !clearable\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"_$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  <i>{{ noResultMessage | translate }}</i>\n                </ion-label>\n              </mat-option>\n\n              <!-- Options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col\n                    *ngFor=\"let path of displayAttributes; index as i\"\n                    [size]=\"displayColumnSizes[i]\"\n                    class=\"ion-align-self-center\"\n                  >\n                    <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option\n                *ngIf=\"_moreItemsCount\"\n                (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <mat-option\n              *ngIf=\"itemCount as count\"\n              class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\"\n              disabled\n            >\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </mat-option>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option\n                *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                class=\"ion-padding\"\n                disabled\n              >\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"floatLabel === 'never' && placeholder\"\n              [appAutofocus]=\"autofocus\"\n              [tabindex]=\"_tabindex\"\n              [required]=\"required\"\n              (click)=\"clicked.emit($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keydown.escape)=\"keydownEscape.emit($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            />\n\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              autoActiveFirstOption\n              hideSingleSelectionIndicator\n              [displayWith]=\"displayWith\"\n              [class]=\"classList\"\n              [panelWidth]=\"panelWidth\"\n            >\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *rxIf=\"_$filteredItems; let items; else: loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    <i>{{ noResultMessage | translate }}</i>\n                  </ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col\n                      *ngFor=\"let path of displayAttributes; index as i\"\n                      [size]=\"displayColumnSizes[i]\"\n                      [title]=\"text.innerText\"\n                      class=\"ion-align-self-center\"\n                    >\n                      <ion-text>\n                        <span\n                          #text\n                          [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option\n                  *ngIf=\"_moreItemsCount\"\n                  (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option\n                  *ngIf=\"(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                  class=\"ion-padding\"\n                  disabled\n                >\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\">\n                    <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-autocomplete>\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"!mobile && !multiple\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n    [title]=\"dropButtonTitle | translate\"\n  >\n    <ion-icon name=\"caret-down-outline\"></ion-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n    [title]=\"(clearButtonTitle  || '') | translate\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.ModalController }, { type: i0.Renderer2 }, { type: i0.ViewRef, decorators: [{
                     type: Inject,
                     args: [ChangeDetectorRef]
@@ -9770,7 +9770,7 @@ class MatChipsField {
                 multi: true,
                 useExisting: forwardRef(() => MatChipsField),
             },
-        ], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        class=\"material-chips\"\n        [class.mat-form-field-disabled]=\"disabled\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\">\n          <mat-chip-row\n            class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            [highlighted]=\"true\"\n          >\n            {{ displayWith(item) }}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip-row>\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"inputControl\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"disabled\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          (optionSelected)=\"add($event)\"\n          autoActiveFirstOption\n          [displayWith]=\"displayWith\"\n          [class]=\"classList\"\n          [panelWidth]=\"panelWidth\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <!-- Options -->\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                <i>{{ noResultMessage | translate }}</i>\n              </ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col\n                  *ngFor=\"let path of displayAttributes; index as i\"\n                  [size]=\"displayColumnSizes[i]\"\n                  [title]=\"text.innerText\"\n                >\n                  <ion-text>\n                    <span\n                      #text\n                      [innerHTML]=\"\n                        item\n                          | propertyGet: path\n                          | highlight: { search: inputControl.value, withAccent: highlightAccent }\n                      \"\n                    ></span>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option\n              *ngIf=\"_moreItemsCount\"\n              (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option\n              *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </ion-col>\n          </ion-row>\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n  >\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:#00000078;font-size:150%}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 26px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.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$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        class=\"material-chips\"\n        [class.mat-form-field-disabled]=\"disabled\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\">\n          <mat-chip-row\n            class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            [highlighted]=\"true\"\n          >\n            {{ displayWith(item) }}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip-row>\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"inputControl\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"disabled\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          (optionSelected)=\"add($event)\"\n          autoActiveFirstOption\n          [displayWith]=\"displayWith\"\n          [class]=\"classList\"\n          [panelWidth]=\"panelWidth\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <!-- Options -->\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                <i>{{ noResultMessage | translate }}</i>\n              </ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col\n                  *ngFor=\"let path of displayAttributes; index as i\"\n                  [size]=\"displayColumnSizes[i]\"\n                  [title]=\"text.innerText\"\n                >\n                  <ion-text>\n                    <span\n                      #text\n                      [innerHTML]=\"\n                        item\n                          | propertyGet: path\n                          | highlight: { search: inputControl.value, withAccent: highlightAccent }\n                      \"\n                    ></span>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option\n              *ngIf=\"_moreItemsCount\"\n              (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option\n              *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </ion-col>\n          </ion-row>\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n  >\n    <ion-icon name=\"caret-down-outline\"></ion-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.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$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatChipsField, decorators: [{
             type: Component,
@@ -9780,7 +9780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => MatChipsField),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        class=\"material-chips\"\n        [class.mat-form-field-disabled]=\"disabled\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\">\n          <mat-chip-row\n            class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            [highlighted]=\"true\"\n          >\n            {{ displayWith(item) }}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip-row>\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"inputControl\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"disabled\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          (optionSelected)=\"add($event)\"\n          autoActiveFirstOption\n          [displayWith]=\"displayWith\"\n          [class]=\"classList\"\n          [panelWidth]=\"panelWidth\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <!-- Options -->\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                <i>{{ noResultMessage | translate }}</i>\n              </ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col\n                  *ngFor=\"let path of displayAttributes; index as i\"\n                  [size]=\"displayColumnSizes[i]\"\n                  [title]=\"text.innerText\"\n                >\n                  <ion-text>\n                    <span\n                      #text\n                      [innerHTML]=\"\n                        item\n                          | propertyGet: path\n                          | highlight: { search: inputControl.value, withAccent: highlightAccent }\n                      \"\n                    ></span>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option\n              *ngIf=\"_moreItemsCount\"\n              (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option\n              *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </ion-col>\n          </ion-row>\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n  >\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:#00000078;font-size:150%}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 26px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        class=\"material-chips\"\n        [class.mat-form-field-disabled]=\"disabled\"\n      >\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n        <mat-chip-grid #chipList (focus)=\"filterChipsFocusEvent($event)\">\n          <mat-chip-row\n            class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            [highlighted]=\"true\"\n          >\n            {{ displayWith(item) }}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip-row>\n\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"inputControl\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"disabled\"\n            [hidden]=\"disabled\"\n            [required]=\"required\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n          />\n        </mat-chip-grid>\n\n        <!-- autocomplete -->\n        <mat-autocomplete\n          #autocomplete=\"matAutocomplete\"\n          (optionSelected)=\"add($event)\"\n          autoActiveFirstOption\n          [displayWith]=\"displayWith\"\n          [class]=\"classList\"\n          [panelWidth]=\"panelWidth\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <!-- Options -->\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                <i>{{ noResultMessage | translate }}</i>\n              </ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col\n                  *ngFor=\"let path of displayAttributes; index as i\"\n                  [size]=\"displayColumnSizes[i]\"\n                  [title]=\"text.innerText\"\n                >\n                  <ion-text>\n                    <span\n                      #text\n                      [innerHTML]=\"\n                        item\n                          | propertyGet: path\n                          | highlight: { search: inputControl.value, withAccent: highlightAccent }\n                      \"\n                    ></span>\n                  </ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option\n              *ngIf=\"_moreItemsCount\"\n              (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option\n              *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n              class=\"ion-padding\"\n              disabled\n            >\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\" class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\">\n                <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n              </ion-text>\n            </ion-col>\n          </ion-row>\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n      </mat-form-field>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"dropButtonClick.emit($event)\"\n    [hidden]=\"disabled\"\n  >\n    <ion-icon name=\"caret-down-outline\"></ion-icon>\n  </button>\n  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    *ngIf=\"clearable\"\n    (click)=\"clearValue($event)\"\n    [hidden]=\"disabled || !formControl.value\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { equals: [{
@@ -38361,11 +38361,11 @@ class AutocompleteTestPage {
         return JSON.stringify(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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    <ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">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    <ion-grid *ngIf=\"mode === 'memory'\">\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\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field\n            formControlName=\"entity\"\n            *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n            [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n            [mobile]=\"memoryMobile\"\n            [equals]=\"equals\"\n            [logPrefix]=\"'[combo-memory-leak]'\"\n          ></mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\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\">\nvalue: {{ 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              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">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\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\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\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>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <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              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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\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\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\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                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.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: i1$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i1$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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    <ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">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    <ion-grid *ngIf=\"mode === 'memory'\">\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\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field\n            formControlName=\"entity\"\n            *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n            [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n            [mobile]=\"memoryMobile\"\n            [equals]=\"equals\"\n            [logPrefix]=\"'[combo-memory-leak]'\"\n          ></mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\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\">\nvalue: {{ 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\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\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\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\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>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <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\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>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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\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\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\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                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.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: i1$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.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$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i1$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AutocompleteTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete-test', 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    <ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">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    <ion-grid *ngIf=\"mode === 'memory'\">\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\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field\n            formControlName=\"entity\"\n            *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n            [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n            [mobile]=\"memoryMobile\"\n            [equals]=\"equals\"\n            [logPrefix]=\"'[combo-memory-leak]'\"\n          ></mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\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\">\nvalue: {{ 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              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">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\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\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\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>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <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              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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\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\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\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                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n" }]
+            args: [{ selector: 'app-autocomplete-test', 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    <ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">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    <ion-grid *ngIf=\"mode === 'memory'\">\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\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field\n            formControlName=\"entity\"\n            *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n            [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n            [mobile]=\"memoryMobile\"\n            [equals]=\"equals\"\n            [logPrefix]=\"'[combo-memory-leak]'\"\n          ></mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\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\">\nvalue: {{ 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\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\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\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\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>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <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\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>\nsuggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '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\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\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\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\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\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\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\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\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\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\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                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }], propDecorators: { farEntityField: [{
                 type: ViewChild,
                 args: ['farEntityField']